CSS テキストの折り返し: きれい

テキストの折り返しを最適化して、スピードより美しさを両立。

Adam Argyle

Chrome 117 以降では、新しいテキストの折り返し機能 text-wrap: pretty を使用できます。 CSS テキスト レベル 4 からのクラスです。

p {
  text-wrap: pretty;
}

<ph type="x-smartling-placeholder">

</ph>

https://codepen.io/web-dot-dev/pen/yLGmzLJ

タイポグラフィの未亡人と孤児は独身 段落やテキスト ブロックの最後に単独で表示される単語です。死別は言葉 テキスト ブロックの一番上には孤立があり、テキスト の最後には孤立しかなく ブロックします。目で文字を見分けるのを妨げて、コンテンツを読みにくくなる可能性がある あります。何としても避けて 最善を尽くすデザイナーもいます 防ぐことができます。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 画像提供元: Google Fonts—Widows &オーファン

Chrome 117 以降では、孤立は 1 行の CSS: text-wrap: pretty で回避できます。

注: text-wrap: pretty は CSS のものと異なります。 orphans プロパティ これは、CSS の複数列 あります。 また、pretty は孤児のみを処理し、死別は扱いません。

この機能は、段落が 連続するハイフン付きの行がある場合、ハイフンも調整されます。 行を変更したり、スペースを空けるために前の行を調整したりできます。また、 適切に調整する必要があります。text-wrap: pretty: 通常は行折り返しやテキストの区切りが改善されます。 今後、text-wrap: pretty はさらなる改善を提供する可能性があります。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 画像は、本文から孤立した人を排除すべき理由から引用したものです。

text-wrap: balance もあります。 孤立を防ぐが、テキストの折り返しでは 生成できます。個人的には、広告見出しに balance を、次の広告には pretty を使用しています 分割できます。

パフォーマンスの判定に使用されるアルゴリズム 最適な行数、またはパフォーマンスに関する考慮事項については、エンジニアが作成した設計ドキュメントへのリンクをご覧ください。 石井コージ氏が手がけています。

他にも改善点やご提案がありましたら、ぜひお聞かせください できます。問題の詳細と例を記載して Chromium バグトラッカーに問題を報告します。 適当または悪い改行があったら、あらためて連絡します。