CSSでテキストを折り返す方法

CSS は Web デザインに使用されるスタイルシート言語で、Web ページをより美しく、読みやすくすることができます。 Web ページではテキストが大きな割合を占めるため、テキストをどのように折り返すかは CSS 設計において重要な問題です。

CSS では、改行はライン ブレークまたはワード ブレークと呼ばれ、テキストの行の長さが一定の制限を超えた場合に、テキストを自動的に折り返したり改行を追加したりする方法を指します。 CSSで文字列の折り返しを実装する方法を紹介します。

1. CSS で "word-wrap" 属性を使用する

CSS では、"word-wrap" 属性を使用して、単語の途中で単語の分割を実行するかどうかを制御できます。 。デフォルトでは、ブラウザは自動的に単語を折り返しますが、「word-wrap」属性を設定すると、ブラウザは単語の途中にハイフネーション記号を自動的に挿入して、より良い行折り返し効果を実現できます。具体的なコードは次のとおりです。

p {
  word-wrap: break-word;
}

このスタイルは、コンテナの幅が不十分な場合にワード行を分割し、配置の整合性を確保するためにワードの途中にハイフネーション記号を挿入します。

2. CSS で「word-break」属性を使用する

「word-wrap」属性に加えて、CSS は非 CJK を制御するための別の属性「word-break」も提供します。 (中国語、日本語、韓国語) 文字行の折り返し。デフォルト設定で「単語区切り」を使用すると、単語内の任意の場所で単語が分割され、視覚的に途切れる可能性があります。この問題を解決するには、「word-break」属性を「keep-all」に設定して、単語で改行されないようにすることができます。具体的なコードは次のとおりです:

p {
  word-break: keep-all;
}

3. CSS で "white-space" 属性を使用する

CSS の "white-space" 属性は、スペースと改行を制御するために使用されます。テキストの表示方法。デフォルトでは、「white-space」属性は「normal」に設定されており、テキスト内の余分なスペースや改行は無視されます。これらのスペースや改行を保持したい場合は、「white-space」属性を設定できます。 「プレ」または「プレラップ」に。具体的なコードは次のとおりです。

p {
  white-space: pre-wrap;
}

このスタイルは、コンテナ内で連続したスペースと改行を保持します。テキスト内で強制的に改行したい場合は、「
」タグを使用できます。例:

<p>这是第一行
这是第二行</p>

上記は、一般的に使用される 3 つの CSS スタイル プロパティで、改行と改行を効果的に制御できます。テキストの表示。実際の Web デザインでは、実際の状況に応じて適切な属性を選択して、最適な効果を実現できます。

以上がCSSでテキストを折り返す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。