多くの書記言語では、単語だけでなく音節の間で改行できます。これは、テキスト領域の行数を減らしてスペースを節約することを目的として、テキストの行に多くの文字を配置できるようにするために行われます。このような言語では、ハイフン（-）で区切られていることが視覚的に示されます。
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 つの音節の間に行を分割できることがわかります。