CSS | hyphens | ハイフン

hyphensプロパティを使って、英語などで使うハイフン(単語の途中の改行)を指定できます。

日本語はどこでも改行できるので、あまり意味は無いです。

`hyphens`の設定値
設定値	意味	デフォルト
`auto`	`lang`属性に従い、自動でハイフンが入る
`manual`	ソフト・ハイフン( `` )でハイフンが入る
`none`	ハイフンは入らない

例として英語とドイツ語のとても長い単語を書くと、はみ出します。

HTML


<div class="sample">
    pneumonoultramicroscopicsilicovolcanoconiosis
    supercalifragilisticexpialidocious antidisestablishmentarianism
    pseudopseudohypoparathyroidism floccinaucinihilipilification.
</div>

<div class="sample">
    Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
</div>

CSS


div {
    border:    3px solid green; /* 境界線 */
    color:     navy;            /* 文字の色 */
    font-size: large;           /* 文字の大きさ */
    margin:    0.5rem;          /* 外側の余白 */
    padding:   0.5rem;          /* 内側の余白 */
    width:     12rem;           /* 幅 */
}

実行結果初期状態

pneumonoultramicroscopicsilicovolcanoconiosis supercalifragilisticexpialidocious antidisestablishmentarianism pseudopseudohypoparathyroidism floccinaucinihilipilification.

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

hyphens: autoを設定します。自動で適切な箇所で改行されるハズですが変化はありません。

HTML


<div class="sample">
    pneumonoultramicroscopicsilicovolcanoconiosis
    supercalifragilisticexpialidocious antidisestablishmentarianism
    pseudopseudohypoparathyroidism floccinaucinihilipilification.
</div>

<div class="sample">
    Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
</div>

CSS


div {
    border:    3px solid green; /* 境界線 */
    color:     navy;            /* 文字の色 */
    font-size: large;           /* 文字の大きさ */
    margin:    0.5rem;          /* 外側の余白 */
    padding:   0.5rem;          /* 内側の余白 */
    width:     12rem;           /* 幅 */
}

CSS


.sample {
    hyphens: auto;
}

実行結果auto

pneumonoultramicroscopicsilicovolcanoconiosis supercalifragilisticexpialidocious antidisestablishmentarianism pseudopseudohypoparathyroidism floccinaucinihilipilification.

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

hyphens: autoを指定する場合、HTML要素の言語設定(lang)を適切に行う必要があります。

このページでは<html lang="ja">と「このページの言語設定は日本語です」と宣言しているので、ブラウザは全てを日本語と判断していることが問題です。よって、それぞれを英語(lang="en")とドイツ語(lang="de")であると設定すると、上手く改行されます。

HTML


<div class="sample" lang="en">
    pneumonoultramicroscopicsilicovolcanoconiosis
    supercalifragilisticexpialidocious antidisestablishmentarianism
    pseudopseudohypoparathyroidism floccinaucinihilipilification.
</div>

<div class="sample" lang="de">
    Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
</div>

CSS


div {
    border:    3px solid green; /* 境界線 */
    color:     navy;            /* 文字の色 */
    font-size: large;           /* 文字の大きさ */
    margin:    0.5rem;          /* 外側の余白 */
    padding:   0.5rem;          /* 内側の余白 */
    width:     12rem;           /* 幅 */
}

CSS


.sample {
    hyphens: auto;
}

実行結果lang

pneumonoultramicroscopicsilicovolcanoconiosis supercalifragilisticexpialidocious antidisestablishmentarianism pseudopseudohypoparathyroidism floccinaucinihilipilification.

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

hyphens: manualを設定します。この場合、lang設定が適切であっても自動では改行されません。

HTML


<div class="sample" lang="en">
    pneumonoultramicroscopicsilicovolcanoconiosis
    supercalifragilisticexpialidocious antidisestablishmentarianism
    pseudopseudohypoparathyroidism floccinaucinihilipilification.
</div>

<div class="sample" lang="de">
    Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
</div>

CSS


div {
    border:    3px solid green; /* 境界線 */
    color:     navy;            /* 文字の色 */
    font-size: large;           /* 文字の大きさ */
    margin:    0.5rem;          /* 外側の余白 */
    padding:   0.5rem;          /* 内側の余白 */
    width:     12rem;           /* 幅 */
}

CSS


.sample {
    hyphens: manual;
}

実行結果manual

pneumonoultramicroscopicsilicovolcanoconiosis supercalifragilisticexpialidocious antidisestablishmentarianism pseudopseudohypoparathyroidism floccinaucinihilipilification.

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

manualの場合、事前にソフト・ハイフン()を文字列の中に入れておく必要があります。

改行が必要であれば、その箇所で改行されます。改行されない場合は何も表示されません。ソフト・ハイフンない箇所では改行されません。

HTML


<div class="sample" lang="en">
    pneumono&shy;ultra&shy;microscopic&shy;silico&shy;volcano&shy;coni&shy;osis
    super&shy;cali&shy;fragilistic&shy;expiali&shy;docious anti&shy;disestablishmentarian&shy;ism
    pseudoshy;pseudohypoparathyroidism floccinaucinihilipilification.
</div>

<div class="sample" lang="de">
    Donaudampfschiffahrtselektrizitäten&shy;hauptbetriebswerk&shy;bauunterbeamten&shy;gesellschaft.
</div>

CSS


div {
    border:    3px solid green; /* 境界線 */
    color:     navy;            /* 文字の色 */
    font-size: large;           /* 文字の大きさ */
    margin:    0.5rem;          /* 外側の余白 */
    padding:   0.5rem;          /* 内側の余白 */
    width:     12rem;           /* 幅 */
}

CSS


.sample {
    hyphens: manual;
}

実行結果

pneumonoultramicroscopicsilicovolcanoconiosis supercalifragilisticexpialidocious antidisestablishmentarianism pseudoshy;pseudohypoparathyroidism floccinaucinihilipilification.

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

これをhyphens: autoにしてみます。ソフト・ハイフン()が優先され、ソフト・ハイフンない箇所は言語によって自動で改行されます。

HTML


<div class="sample" lang="en">
    pneumono&shy;ultra&shy;microscopic&shy;silico&shy;volcano&shy;coni&shy;osis
    super&shy;cali&shy;fragilistic&shy;expiali&shy;docious anti&shy;disestablishmentarian&shy;ism
    pseudoshy;pseudohypoparathyroidism floccinaucinihilipilification.
</div>

<div class="sample" lang="de">
    Donaudampfschiffahrtselektrizitäten&shy;hauptbetriebswerk&shy;bauunterbeamten&shy;gesellschaft.
</div>

CSS


div {
    border:    3px solid green; /* 境界線 */
    color:     navy;            /* 文字の色 */
    font-size: large;           /* 文字の大きさ */
    margin:    0.5rem;          /* 外側の余白 */
    padding:   0.5rem;          /* 内側の余白 */
    width:     12rem;           /* 幅 */
}

CSS


.sample {
    hyphens: auto;
}

実行結果auto

pneumonoultramicroscopicsilicovolcanoconiosis supercalifragilisticexpialidocious antidisestablishmentarianism pseudoshy;pseudohypoparathyroidism floccinaucinihilipilification.

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

よって、現実的には以下の設定が最適でしょう。

langは適切に設定する。(英語の場合、lang="en")など。
長い単語はできるだけソフト・ハイフン()を入れておく。
hyphens: autoにする。(デフォルトはmanualです)

hyphens: noneにすると、ソフト・ハイフン()や言語設定(lang)に関わらずハイフンによる改行は無効になります。

HTML


<div class="sample" lang="en">
    pneumono&shy;ultra&shy;microscopic&shy;silico&shy;volcano&shy;coni&shy;osis
    super&shy;cali&shy;fragilistic&shy;expiali&shy;docious anti&shy;disestablishmentarian&shy;ism
    pseudoshy;pseudohypoparathyroidism floccinaucinihilipilification.
</div>

<div class="sample" lang="de">
    Donaudampfschiffahrtselektrizitäten&shy;hauptbetriebswerk&shy;bauunterbeamten&shy;gesellschaft.
</div>

CSS


div {
    border:    3px solid green; /* 境界線 */
    color:     navy;            /* 文字の色 */
    font-size: large;           /* 文字の大きさ */
    margin:    0.5rem;          /* 外側の余白 */
    padding:   0.5rem;          /* 内側の余白 */
    width:     12rem;           /* 幅 */
}

CSS


.sample {
    hyphens: none;
}

実行結果none

pneumonoultramicroscopicsilicovolcanoconiosis supercalifragilisticexpialidocious antidisestablishmentarianism pseudoshy;pseudohypoparathyroidism floccinaucinihilipilification.

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.