

プロパティについて
#
概要
初期値 | “hyphens: manual;” |
適用対象 | インライン・ボックス |
継承 | Yes |
パーセント値 | パーセント値は指定できません |
計算値 | 指定したキーワード |
アニメーション | 離散 |
“hyphens”プロパティはハイフネーションによって単語途中で行を折り返すかを指定するプロパティです。

サンプルコード
p { hyphens: auto;}
#
#
#
使用例
#
ハイフネーションを行わない
p { hyphens: none;}
<p>
This paragraph shows how "hyphenation" works with Cascading Style Sheets.
</p>
<p>
This par­a­graph shows how "hy­phen­a­tion" works with Cas­cading Style Sheets.
</p>
This paragraph shows how "hyphenation" works with Cascading Style Sheets.
This paragraph shows how "hyphenation" works with Cascading Style Sheets.
#
手動でハイフネーションを行う
p { hyphens: manual;}
<p>
This paragraph shows how "hyphenation" works with Cascading Style Sheets.
</p>
<p>
This par­a­graph shows how "hy­phen­a­tion" works with Cas­cading Style Sheets.
</p>
This paragraph shows how "hyphenation" works with Cascading Style Sheets.
This paragraph shows how "hyphenation" works with Cascading Style Sheets.
#
自動でハイフネーションを行う
p { hyphens: auto;}
<p>
This paragraph shows how "hyphenation" works with Cascading Style Sheets.
</p>
<p>
This par­a­graph shows how "hy­phen­a­tion" works with Cas­cading Style Sheets.
</p>
This paragraph shows how "hyphenation" works with Cascading Style Sheets.
This paragraph shows how "hyphenation" works with Cascading Style Sheets.