CSS は多言語 Web サイトで各単語の後に改行を強制するにはどうすればよいですか?

CSS の各単語の後の改行

多言語 Web サイト開発では、テキストの配置とスタイル要素を維持することが、異なる言語を扱うときに課題となる可能性がありますルール。このようなシナリオの 1 つは、一貫性を確保するために、特定の要素内の各単語の後に強制的に改行を入れることです。これは 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;
}

を置き換えます。親要素の幅、または単一行の幅を超える任意の大きな値を使用します。これにより、すべての単語がそれぞれの行に分割されます。

例

次の HTML について考えてみましょう。

<p class="one-word-per-line">
    Short Word Gargantuan Word
</p>

CSS が適用されると、テキストが表示されます

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------

互換性

このソリューションは Chrome、Firefox、Opera、IE7 でサポートされており、ブラウザー間での幅広い互換性が保証されています。

以上がCSS は多言語 Web サイトで各単語の後に改行を強制するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。