このページで解説するコードの実行結果。

hyphens: auto;
ソフト・ハイフンなし

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ソフト・ハイフンあり

Donaudampfschiffahrtselektrizitäten­hauptbetriebswerk­bauunterbeamten­gesellschaft.

hyphens: manual;
ソフト・ハイフンなし

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ソフト・ハイフンあり

Donaudampfschiffahrtselektrizitäten­hauptbetriebswerk­bauunterbeamten­gesellschaft.

hyphens: none;
ソフト・ハイフンなし

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ソフト・ハイフンあり

Donaudampfschiffahrtselektrizitäten­hauptbetriebswerk­bauunterbeamten­gesellschaft.

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
p {  
    border:         solid blue;   /*  境界線  */
    max-width:      15em;         /*  最大幅  */
    color:          red;          /*  文字の色 */
    background-color:   #fef;     /*  背景色 */
    font-size:      1.2em;        /*  文字の大きさ */
}

hyphensの概要

英語などの場合、長い単語で単語中で改行される場合、ハイフンが入る。その設定。

(表) hyphensの設定値
設定値機能デフォルト
manualソフト・ハイフン( ­ )に従う。
autolang属性に従い、自動でハイフンが入る
noneハイフンは入らない

まず、hyphensの設定が無い場合の結果。(デフォルト値のmanualと同じ結果)

HTML : 適用するHTML
<div/>ソフト・ハイフンなし</div>
<p class="sample" lang="de">
    Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
</p>
<div/>ソフト・ハイフンあり</div>
<p class="sample" lang="de">
    Donaudampfschiffahrtselektrizitäten&shy;hauptbetriebswerk&shy;bauunterbeamten&shy;gesellschaft.
</p>
実行結果
ソフト・ハイフンなし

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ソフト・ハイフンあり

Donaudampfschiffahrtselektrizitäten­hauptbetriebswerk­bauunterbeamten­gesellschaft.

manual

CSS : manual
.sample  {
    hyphens: manual;
}
実行結果
ソフト・ハイフンなし

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ソフト・ハイフンあり

Donaudampfschiffahrtselektrizitäten­hauptbetriebswerk­bauunterbeamten­gesellschaft.

auto

この設定を有効にするには、lang属性を適切に設定する必要がある。

例では、lang="de"とドイツ語であることを明示しているので、「ソフト・ハイフンなし」でも自動的にハイフンが入っている。

なお、ソフト・ハイフンは無視されている。

CSS : auto
.sample  {
    hyphens: auto;
}
実行結果
ソフト・ハイフンなし

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ソフト・ハイフンあり

Donaudampfschiffahrtselektrizitäten­hauptbetriebswerk­bauunterbeamten­gesellschaft.

none

ソフト・ハイフンを無視する。

CSS : none
.sample  {
    hyphens: none;
}
実行結果
ソフト・ハイフンなし

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ソフト・ハイフンあり

Donaudampfschiffahrtselektrizitäten­hauptbetriebswerk­bauunterbeamten­gesellschaft.

ハード・ハイフンとソフト・ハイフン

ハード・ハイフンは常にブラウザ上に表示される一方、 ソフト・ハイフンは改行されたときだけ表示される。

ソフト・ハイフンの方が見た目が良いだろう。

名前HTML記法ブラウザ上の表示
ハード・ハイフン&hyphen;常に表示
ソフト・ハイフン&shy;改行されたときだけ表示
HTML : 適用するHTML
<div/>ハード・ハイフン</div>
<p class="sample" lang="de">
    Donaudampfschiffahrtselektrizitäten&hyphen;hauptbetriebswerk&hyphen;bauunterbeamten&hyphen;gesellschaft.
</p>
<div/>ソフト・ハイフン</div>
<p class="sample" lang="de">
    Donaudampfschiffahrtselektrizitäten&shy;hauptbetriebswerk&shy;bauunterbeamten&shy;gesellschaft.
</p>
実行結果
ハード・ハイフン

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ソフト・ハイフン

Donaudampfschiffahrtselektrizitäten­hauptbetriebswerk­bauunterbeamten­gesellschaft.

ハード・ハイフンは常にブラウザ上に表示される。
ハード・ハイフン

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ソフト・ハイフン

Donaudampfschiffahrtselektrizitäten­hauptbetriebswerk­bauunterbeamten­gesellschaft.