CSS でハイフンを管理する

Joe Medley
Joe Medley

多くの記述言語では、音節間や単語間で行を区切ることができます。これは多くの場合、テキスト領域内の行数を減らしてスペースを節約するために、1 行に配置する文字数を増やすために行われます。このような言語では、区切りはハイフン(-)で視覚的に示されます。

CSS Text Module Level 3 では、ハイフンをユーザーに表示するタイミングとその動作を制御するハイフン プロパティを定義しています。バージョン 55 以降、Chrome にはハイフン プロパティが実装されています。この仕様では、ハイフン プロパティには nonemanualauto の 3 つの値があります。これを説明するため、次の例に示すようにソフトハイフン(­)を使用する必要があります。

Google ipsum dolor sit amet, consectetur adipiscing e­lit.

ソフトハイフンは、末尾のマージンで発生した場合にのみ表示されます。Chrome 55 以降では、このハイフンがどのようにレンダリングされるかは、CSS の hypens プロパティの値によって異なります。

-webkit-hyphens: manual;
hyphens: manual;

これらを組み合わせると、次のような結果になります。

1 行のスクリーンショット

ソフトハイフンは表示されていないことに注意してください。いずれの場合も、ソフトハイフンを含む単語が 1 行に収まる場合、ハイフンは表示されません。次に、ハイフンの 3 つの値すべてがどうなるか見てみましょう。

使用なし

最初の例では、ハイフン プロパティが none に設定されています。これにより、ソフトハイフンが表示されなくなります。これを確認するには、「elit」という単語がテキストの表示行に収まらないようにウィンドウ サイズを調整します。

Google ipsum dolor sit amet, consectetur adipiscing elit.

手動

2 番目の例では、ハイフン プロパティが manual に設定されているため、ソフト ハイフンは、マージンが単語「elit」を区切った場合にのみ表示されます。これもウィンドウ サイズを調整することで確認できます。

Google ipsum dolor sit amet, consectetur adipiscing elit.

自動設定を使用

3 番目の例では、ハイフン プロパティが auto に設定されています。この場合、ユーザー エージェントが自動的にハイフンの場所を決定するため、ソフト ハイフンは必要ありません。ウィンドウのサイズを変更すると、ブラウザはこの例を 2 番目の例と同じ場所にハイフンでつなぎます。ただし、ソフト ハイフンは存在しません。ウィンドウを縮小し続けると、ブラウザでテキストの 2 つの音節間の改行が可能になったことがわかります。

Google ipsum dolor sit amet, consectetur adipiscing elit.