CSSを使用して改行を実現する方法（3つの方法）

行折り返しとは、テキストまたはその他のコンテンツが行末に達したときに自動的に次の行に移動する動作を指します。 Web デザインでは、改行を正しく行うと、ページがより快適で自然に見えるようになります。 CSS で正しい改行を実現するには、いくつかの原則とテクニックを理解する必要があります。この記事では、CSS を使用して改行を実現する方法をいくつか紹介します。

方法 1: word-wrap を使用する

CSS3 では、word-wrap 属性が提供されており、テキストを折り返す方法を制御するために使用できます。この属性には次の値があります:

• normal: デフォルトの属性値、テキストが制限されておらず、境界を超えることができることを意味します;
• break-word: テキストが制限されていない場合を意味します。テキストが境界を超えると、単語が自動的に切り詰められて折り返されますが、単語自体が非常に長い場合でも境界を超えることになります。
• anywhere: テキストはどこでも折り返せることを意味します。
• overflow-wrap: テキストをどこでも折り返すことができることを意味します。「単語」の周りで折り返し、長い単語が見つかった場合は改行を切り捨てます。

ワードラップの使用も非常に簡単で、CSS で対応する属性を設定するだけです。例:

p {
  word-wrap: break-word;
}

上記のコードでは、p 要素内のテキストが境界に遭遇すると自動的に切り詰められ、単語の長さに応じて折り返されます。

方法 2: word-break を使用する

Word-wrap は、常に理想的な解決策であるとは限りません。単語の切り捨てを避け、代わりに任意の場所で折り返したい場合があるからです。この場合、word-break 属性を使用できます。

word-break 属性には次の値があります:

• normal: デフォルトの属性値は、テキストが制限され、単語の途中での切り捨てが許可されないことを意味します。
• break-all: 単語の途中であっても、任意の位置での改行を示します。ただし、単語の完全性が損なわれるため、お勧めできません。
• keep-all: テキストがスペースまたはハイフンでのみ改行されることを示します。アジア言語やスペースを使用しないその他の言語に適しています。

たとえば、テキストの改行で完全な中国語文字を分割する場合は、次のコードを使用できます。

p {
  word-break: break-all;
}

方法 3: 空白を使用する

ホワイトスペースは、テキスト内のスペースと改行を制御するために使用される CSS プロパティです。値は次のとおりです:

• normal: デフォルトの属性値で、テキスト内の複数のスペースと改行が 1 つのスペースにマージされることを意味します。
• pre: は、それを意味します。テキストに複数のスペースがあります スペースと改行は保持され、結合されません;
• nowrap: テキストが自動的に折り返されないことを示します。
• pre-wrap: テキスト内の複数のスペースと改行は保持されますが、行は自動的に折り返され、水平スクロール バーは表示されません。
• pre-line: テキスト内の複数のスペースが 1 つのスペースにマージされますが、改行は保持され、自動行折り返しが行われ、水平スクロール バーは表示されません。

たとえば、コード コメントの数行で、元のスペースと改行を保持したい場合は、次のコードを使用できます。

.comment {
  white-space: pre;
}

これにより、テキストがページ上にあります。 表示される形式は、元のコードの形式と一致します。

概要

CSS で正しい改行を実現するには、いくつかのテクニックを知っている必要があります。 word-wrap、word-break、white-space の 3 つの属性を使用して、テキストの自動行折り返し、単語分割、空白保持を実現します。改行を正しく行うと、ページがより読みやすく、美しく、プロフェッショナルなものになります。

以上がCSSを使用して改行を実現する方法（3つの方法）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。