CSSを使用してテキストの折り返しを防ぐ方法

Web 開発では、テキストを折り返さないことが非常に一般的な要件です。段落内のテキストであっても、一連の画像の名前であっても、長い単語や改行は避ける必要があります。では、CSS を通じて改行しないテキストを実現するにはどうすればよいでしょうか?

まず、いくつかの CSS プロパティを理解する必要があります。

1. white-space

このプロパティは、 element 空白文字の処理方法。共通の属性値は次のとおりです:

• normal: 余分な空白文字は無視され、連続する空白文字は 1 つの空白にマージされ、必要に応じて改行されます
• pre: 余分な空白文字は保持されますが、改行は折り返されません
• nowrap: 余分な空白文字は無視されますが、改行は折り返されません
• pre-wrap: 余分な空白文字は保持され、必要に応じて自動的に折り返されます。
• pre-line: 余分な空白文字は無視されます。ただし、必要に応じて自動的に行を折り返す

2. word-break

この属性は、単語の改行ルールを設定するために使用されます。一般的な属性値は次のとおりです。

• normal: ブラウザのデフォルトの改行ルールを使用します。
• break-all: 単語内で許可します。改行、途切れないテキスト (URL など) に適しています
• keep-all: 可能な限り改行、中国語や日本語などの連続文字で構成されるテキストに適しています

3. overflow-wrap

この属性は、要素境界内の改行ルールを制御するために使用されます。つまり、改行に影響します。言葉の位置。一般的な属性値は次のとおりです。

• normal: ブラウザのデフォルトの改行ルールを使用します。
• break-word: 単語が要素の境界に達したら、強制的に改行を行います。

次に、これらの属性を使用して、テキストの非行折り返しを実現します。

方法 1: white-space と overflow-wrap

まず、空白を 1 つのスペースに結合し、その後、必要に応じて結合します。行を自動的に折り返す。これを実現するには、white-space プロパティを nowrap に設定し、overflow-wrap プロパティを break-word に設定します。例:

p {
  white-space: nowrap;
  overflow-wrap: break-word;
}

このように、単語が長すぎて要素の境界を超えると、ブラウザーは単語を強制的に分割し、次の行に表示し続けます。

方法 2: word-break と white-space

もう 1 つの方法は、空白文字の改行規則を保持したまま単語を設定することです。 。 word-break プロパティを keep-all に設定し、white-space プロパティを nowrap に設定できます。例:

p {
  white-space: nowrap;
  word-break: keep-all;
}

このようにして、ブラウザはレイアウトの美しさに影響を与えることなく、単語内で改行を行わず、必要に応じて単語を改行しようとします。

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

overflow-wrap 属性をサポートしていないブラウザの場合は、word を使用できます。 - 代わりに属性をラップします。例:

p {
  word-wrap: break-word;
}

このように、単語が長すぎて要素の境界を超えると、ブラウザーは単語を強制的に分割し、次の行に表示し続けます。

概要

上記は、改行のないテキストを実現するいくつかの方法です。最良の結果を得るには、状況に応じて属性の異なる組み合わせが必要になります。開発では、特定の方法を盲目的に使用するのではなく、特定の状況に基づいて選択を行う必要があります。

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