CSS テキストの折り返し: きれい
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
テキストの折り返しを最適化して、スピードより美しさを両立。
Chrome 117 以降では、新しいテキストの折り返し機能 text-wrap: pretty
を使用できます。
CSS テキスト レベル 4 からのクラスです。
p {
text-wrap: pretty;
}
<ph type="x-smartling-placeholder">
タイポグラフィの未亡人と孤児は独身
段落やテキスト ブロックの最後に単独で表示される単語です。死別は言葉
テキスト ブロックの一番上には孤立があり、テキスト の最後には孤立しかなく
ブロックします。目で文字を見分けるのを妨げて、コンテンツを読みにくくなる可能性がある
あります。何としても避けて 最善を尽くすデザイナーもいます
防ぐことができます。
<ph type="x-smartling-placeholder">
Chrome 117 以降では、孤立は 1 行の CSS: text-wrap: pretty
で回避できます。
この機能は、段落が
連続するハイフン付きの行がある場合、ハイフンも調整されます。
行を変更したり、スペースを空けるために前の行を調整したりできます。また、
適切に調整する必要があります。text-wrap: pretty
:
通常は行折り返しやテキストの区切りが改善されます。
今後、text-wrap: pretty
はさらなる改善を提供する可能性があります。
<ph type="x-smartling-placeholder">
text-wrap: balance
もあります。
孤立を防ぐが、テキストの折り返しでは
生成できます。個人的には、広告見出しに balance
を、次の広告には pretty
を使用しています
分割できます。
パフォーマンスの判定に使用されるアルゴリズム
最適な行数、またはパフォーマンスに関する考慮事項については、エンジニアが作成した設計ドキュメントへのリンクをご覧ください。
石井コージ氏が手がけています。
他にも改善点やご提案がありましたら、ぜひお聞かせください
できます。問題の詳細と例を記載して Chromium バグトラッカーに問題を報告します。
適当または悪い改行があったら、あらためて連絡します。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2023-10-23 UTC。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]
{"lastModified": "\u6700\u7d42\u66f4\u65b0\u65e5 2023-10-23 UTC\u3002"}
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2023-10-23 UTC。"]]