hyphens …… 単語が途中改行された際にハイフンでつなぐかどうかを指定する







広告
hyphensプロパティは、単語が途中改行された際にハイフンでつなぐかどうか(ハイフネーションするかどうか)を指定する際に使用します。
ハイフネーションのルールは言語によって異なります。
そのため、hyphensプロパティで期待通りにハイフネーションさせたい場合には、その要素にlang属性で言語を指定してやる必要があるかもしれません。
以下は、 -moz-hyphens: auto; とプレフィックス(-moz-)付きで指定して、Firefoxで表示した画面を切り取ったものです。

■値
- none
- ハイフンでつながない(初期値)
- auto
- ハイフンを自動挿入する。ブラウザや言語に依存
- manual
- ­を挿入した箇所に必要に応じてハイフンを挿入する
■初期値・適用対象・値の継承
- 初期値
- manual
- 適用対象
- すべての要素
- 値の継承
- する
■使用例
CSSソースは外部ファイル(sample.css)に記述
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; }
HTMLソース
<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>
↓↓↓
ブラウザ上の表示
hyphensプロパティの指定なし
supercalifragilisticexpialidocious
hyphens:auto;を指定
supercalifragilisticexpialidocious
hyphens:manual;を指定
supercalifragilisticexpialidocious
広告