手動で幅を調整せずに、CSS で単語ごとに改行を強制するにはどうすればよいですか?

CSS 内の各単語の後に改行を強制する

多言語 Web サイトで一貫した視覚スタイルを維持することは、特に翻訳によって次のような問題が生じる可能性がある場合に困難になることがあります。デザインを乱す改行。異なる長さの単語を整列させる問題は通常、要素の幅を調整することで解決されますが、開発者は手動調整や PHP などのプログラミング言語への依存の必要性を排除する代替 CSS ソリューションを模索しています。

これを実現するには、CSS単語間隔プロパティを使用するトリックを使用できます。単語間隔を十分に大きな値に設定すると、単語ごとに強制的に改行が行われます。ただし、このアプローチでは親要素の幅を動的に計算する必要があるため、複雑になり、追加の課題が発生する可能性があります。

幸いなことに、高度な CSS 機能と表示プロパティを活用する、より洗練されたソリューションが登場しました。次のプロパティを組み合わせることで、

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

開発者はすべての単語の後に改行を強制し、単一文字の単語であっても次の行に折り返されるようにすることができます。このソリューションは、Chrome、Firefox、Opera、IE7 などの幅広いブラウザーと互換性があります。

以上が手動で幅を調整せずに、CSS で単語ごとに改行を強制するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。