hyphens : 単語の途中のハイフン - CSSプロパティ - Web開発

概要へ移動

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

hyphens: auto;

ソフト・ハイフンなし

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ソフト・ハイフンあり

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

hyphens: manual;

ソフト・ハイフンなし

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ソフト・ハイフンあり

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

hyphens: none;

ソフト・ハイフンなし

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ソフト・ハイフンあり

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

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

CSS : デフォルトCSS


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

`hyphens`の概要

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

（表） `hyphens`の設定値
設定値	機能	デフォルト
`manual`	ソフト・ハイフン（ `` ）に従う。	○
`auto`	`lang`属性に従い、自動でハイフンが入る
`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ätenhauptbetriebswerkbauunterbeamtengesellschaft.

`manual`

CSS : manual


.sample  {
    hyphens: manual;
}

実行結果

ソフト・ハイフンなし

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ソフト・ハイフンあり

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

`auto`

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

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

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

CSS : auto


.sample  {
    hyphens: auto;
}

実行結果

ソフト・ハイフンなし

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ソフト・ハイフンあり

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

`none`

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

CSS : none


.sample  {
    hyphens: none;
}

実行結果

ソフト・ハイフンなし

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ソフト・ハイフンあり

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

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

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

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

名前	HTML記法	ブラウザ上の表示
ハード・ハイフン	`&hyphen;`	常に表示
ソフト・ハイフン	``	改行されたときだけ表示

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äten‐hauptbetriebswerk‐bauunterbeamten‐gesellschaft.

ソフト・ハイフン

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

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

ハード・ハイフン

Donaudampfschiffahrtselektrizitäten‐hauptbetriebswerk‐bauunterbeamten‐gesellschaft.

ソフト・ハイフン

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

リンク

MDN（日本語） > CSS > hyphens

hyphensの概要

manual

auto

none

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

リンク

`hyphens`の概要

`manual`

`auto`

`none`