CSSでテキストを折り返さないように設定する方法

Web デザインにおいて、テキストは最も重要な要素の 1 つです。ページ上でテキストを最適な効果で表示する方法は、私たちが考える必要がある問題です。テキストの折り返しを防ぐ方法は、最も一般的な問題の 1 つです。この記事では、CSS を介してテキストが折り返されないように制御する方法について説明します。

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

ホワイトスペース属性は CSS の重要な属性であり、要素内の空白文字の処理方法を制御するために使用されます。これには主に次の値が含まれます:

1. normal

#これはデフォルト値であり、空白文字がブラウザによって無視されることを意味します。文字、ブラウザ ブラウザには空白文字のみが表示されます。

2. pre

pre は空白文字を保持することを意味し、HTML に記述された空白文字が保持され、HTML 内の空白文字がページに表示されます。

3. nowrap

nowrap は、改行が許可されていないことを意味します。テキストを 1 行に表示するのに十分なスペースがない場合、テキストは要素の範囲からオーバーフローします。 。

4. プレラップ

プレラップとは、HTML 内の空白文字を保持し、改行を許可することを意味します。

5. pre-line

pre-line は、HTML 内の空白文字は保持されますが、連続する空白文字は無視され、改行が許可されることを意味します。

2. Word-wrap 属性

word-wrap 属性は、ブラウザが単語を処理する方法を制御するために使用されます。 1 行内の単語が長すぎると、要素の幅が親要素の幅の範囲を超えて増加し、ページのレイアウトに影響します。

1. normal

これはデフォルト値であり、ブラウザが単語内で改行を改行しないことを意味します。

2. break-word

break-word は、単語がレイアウトに影響を及ぼさないように、単語内の改行を分割します。

3. ホワイトスペースとワードラップの組み合わせ使用

ホワイトスペース属性とワードラップ属性を一緒に使用して、テキストの折り返しを制御する効果を実現できます。

1. white-space:nowrap;

word-wrap:break-word;

これは、改行は許可されないことを意味しますが、単語が長すぎます。単語が親要素の幅を超えると、単語内で改行されます。

2. white-space:pre-wrap;

word-wrap:break-word;

これは、HTML 内の空白文字が改行が保存され、許可されますが、単語内で改行は行われません。

複数の値を組み合わせることで、より正確な制御効果を実現できます。

概要:

CSS を通じて行を折り返さないテキストを制御するには、white-space 属性と word-wrap 属性を使用し、複数の値を組み合わせてこれを実現します。これは、Web サイトのレイアウト効果にとって非常に重要です。テキストの垂直方向の配置、テキストのオーバーフローの非表示、その他の特殊効果を制御したい場合は、他の CSS プロパティと組み合わせて使用​​することもできます。柔軟に使用する限り、Web デザインの半分の労力で 2 倍の結果が得られます。

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