CSS はどのようにして要素内の各単語の後に自動的に改行を作成できるのでしょうか?-CSSチュートリアル-php.cn

CSS はどのようにして要素内の各単語の後に自動的に改行を作成できるのでしょうか?

Barbara Streisand

リリース： 2024-12-11 10:58:12

オリジナル

830 人が閲覧しました

How Can CSS Automatically Create Line Breaks After Each Word in an Element?

要素内のすべての単語に対する CSS 改行

多言語 Web サイトでは、所有者が HTML に慣れていない場合、改行によって一貫した視覚スタイルを維持することが困難になる場合があります。翻訳中に変更できる手動の改行に頼るのではなく、各単語の後で自動的に改行する CSS ソリューションを検討してみましょう。

1 つのアプローチには、単語間に余分なスペースを作成する word-spacing プロパティの使用が含まれます。ただし、1 文字の後でさえも確実に改行されるように、親要素の幅を設定する必要があります。次の 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;
}

ログイン後にコピー

where 親要素の希望の幅です。このソリューションにより、単一の単語の後でさえ改行が発生し、望ましい視覚的なレイアウトが維持されます。

以上がCSS はどのようにして要素内の各単語の後に自動的に改行を作成できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。