hyphensプロパティは、単語が途中改行された際にハイフンでつなぐかどうか(ハイフネーションするかどうか)を指定する際に使用します。
ハイフネーションのルールは言語によって異なります。
そのため、hyphensプロパティで期待通りにハイフネーションさせたい場合には、その要素にlang属性で言語を指定してやる必要があるかもしれません。
以下は、 -moz-hyphens: auto; とプレフィックス(-moz-)付きで指定して、Firefoxで表示した画面を切り取ったものです。
p.sample1 { width:40px; background-color:#99cc00; word-break:break-all; } p.sample2 { width:40px; background-color:#99cc00; word-break:break-all; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; } p.sample3 { width:40px; background-color:#99cc00; word-break:break-all; hyphens: manual; -webkit-hyphens: manual; -moz-hyphens: manual; -ms-hyphens: manual; }
<h5>hyphensプロパティの指定なし</h5> <p lang="en" class="sample1"> supercalifragilisticexpialidocious </p> <h5>hyphens:auto;を指定</h5> <p lang="en" class="sample2"> supercalifragilisticexpialidocious </p> <h5>hyphens:manual;を指定</h5> <p lang="en" class="sample3"> sup­ercali­fragi­listic­expialidocious </p>
supercalifragilisticexpialidocious
supercalifragilisticexpialidocious
supercalifragilisticexpialidocious