多くの記述言語では、音節間や単語間で行を区切ることができます。これは多くの場合、テキスト領域内の行数を減らしてスペースを節約するために、1 行に配置する文字数を増やすために行われます。このような言語では、区切りはハイフン(-)で視覚的に示されます。
CSS Text Module Level 3 では、ハイフンをユーザーに表示するタイミングとその動作を制御するハイフン プロパティを定義しています。バージョン 55 以降、Chrome にはハイフン プロパティが実装されています。この仕様では、ハイフン プロパティには none
、manual
、auto
の 3 つの値があります。これを説明するため、次の例に示すようにソフトハイフン(­
)を使用する必要があります。
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
ソフトハイフンは、末尾のマージンで発生した場合にのみ表示されます。Chrome 55 以降では、このハイフンがどのようにレンダリングされるかは、CSS の hypens
プロパティの値によって異なります。
-webkit-hyphens: manual;
hyphens: manual;
これらを組み合わせると、次のような結果になります。
ソフトハイフンは表示されていないことに注意してください。いずれの場合も、ソフトハイフンを含む単語が 1 行に収まる場合、ハイフンは表示されません。次に、ハイフンの 3 つの値すべてがどうなるか見てみましょう。
使用なし
最初の例では、ハイフン プロパティが none
に設定されています。これにより、ソフトハイフンが表示されなくなります。これを確認するには、「elit」という単語がテキストの表示行に収まらないようにウィンドウ サイズを調整します。
手動
2 番目の例では、ハイフン プロパティが manual
に設定されているため、ソフト ハイフンは、マージンが単語「elit」を区切った場合にのみ表示されます。これもウィンドウ サイズを調整することで確認できます。
自動設定を使用
3 番目の例では、ハイフン プロパティが auto
に設定されています。この場合、ユーザー エージェントが自動的にハイフンの場所を決定するため、ソフト ハイフンは必要ありません。ウィンドウのサイズを変更すると、ブラウザはこの例を 2 番目の例と同じ場所にハイフンでつなぎます。ただし、ソフト ハイフンは存在しません。ウィンドウを縮小し続けると、ブラウザでテキストの 2 つの音節間の改行が可能になったことがわかります。