CSS ホワイトスペース処理プロパティの解釈: ホワイトスペースとワードブレーク

CSS 空白処理プロパティの解釈:空白と単語区切り

Web ページを開発するとき、テキスト コンテンツを空白にする必要がある状況によく遭遇します。 CSS には、テキスト内の空白記号と単語の折り返しを制御するためのプロパティがいくつか用意されており、Web コンテンツをより美しく読みやすくします。この記事では、CSS の 2 つの空白処理プロパティである空白とワードブレークについて詳しく説明し、具体的なコード例を示します。

1. ホワイトスペース属性

ホワイトスペース属性は、テキスト内の空白記号の処理方法を定義するために使用され、一般的に使用される属性値は次のとおりです:

1. normal: 通常の空白文字を処理します。連続する空白文字は 1 つのスペースに結合され、改行は無視されます。
2. nowrap: 改行は無視され、すべての空白文字は 1 つのスペースにマージされ、テキストは自動的に折り返されません。
3. pre: 空白文字の元の形式を維持し、空白文字を結合したり無視したりしないでください。テキストには、スペースや改行などの空白文字の元の位置が保持されます。

以下は、ホワイトスペース属性の役割をよりよく理解するためのサンプル コードです:

<style>
pre {
  whitespace: normal;
}
</style>

<pre class="brush:php;toolbar:false">
  This    is    a    text
      with            spaces.

上の例では、pre タグを使用して段落を複数の連続するスペースで囲みます。 。 文章。ホワイトスペースのプロパティを通常に設定すると、連続するホワイトスペース文字が 1 つのスペースにマージされ、テキストの通常の処理が可能になります。

2. Word-break 属性

word-break 属性は、改行時のテキストの分割方法を指定するために使用されます。一般的に使用される属性値は次のとおりです:

1. normal: 単語を通常どおりに分割します。単語全体が 1 行に収まらない場合、単語は新しい行に分割されずに次の行に分割されます。
2. break-all: 単語を任意の文字間で分割および折り返すことができます。単語全体が 1 行に収まらない場合は、必要に応じて単語が文字間で分割されます。
3. keep-all: 強制的に改行を行わず、半角スペースまたはハイフンでのみ改行を許可します。連続する空白以外の文字は全体として扱われ、折り返し時に単語は分割されません。

以下は、word-break 属性の役割をよりよく理解するためのサンプル コードです:

<style>
div {
  width: 200px;
  word-break: break-all;
}
</style>

<div>
  ThisIsAReallyLongWordThatCannotFitInTheContainer.
</div>

上の例では、div 要素を使用して、長さを超えるテキストをラップしています。コンテナの幅、長い単語。 word-break属性をbreak-allに設定すると、必要に応じて任意の文字間で単語が改行され、長い単語の自動改行が実現します。

概要:

CSS の空白と単語区切りのプロパティは、テキストの空白と単語の折り返しを制御します。これらの属性を適切に使用することで、テキスト コンテンツをより適切に処理し、Web ページのプレゼンテーションをより美しく、読みやすくすることができます。この記事で提供されている具体的なコード例が、読者がこれら 2 つのプロパティをよりよく理解し、適用するのに役立つことを願っています。

以上がCSS ホワイトスペース処理プロパティの解釈: ホワイトスペースとワードブレークの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。