Web 開発では、テキストを折り返さないことが非常に一般的な要件です。段落内のテキストであっても、一連の画像の名前であっても、長い単語や改行は避ける必要があります。では、CSS を通じて改行しないテキストを実現するにはどうすればよいでしょうか?
まず、いくつかの CSS プロパティを理解する必要があります。
white-space
このプロパティは、 element 空白文字の処理方法。共通の属性値は次のとおりです:
normal
: 余分な空白文字は無視され、連続する空白文字は 1 つの空白にマージされ、必要に応じて改行されますpre
: 余分な空白文字は保持されますが、改行は折り返されません nowrap
: 余分な空白文字は無視されますが、改行は折り返されませんpre-wrap
: 余分な空白文字は保持され、必要に応じて自動的に折り返されます。 pre-line
: 余分な空白文字は無視されます。ただし、必要に応じて自動的に行を折り返すword-break
この属性は、単語の改行ルールを設定するために使用されます。一般的な属性値は次のとおりです。
normal
: ブラウザのデフォルトの改行ルールを使用します。 break-all
: 単語内で許可します。改行、途切れないテキスト (URL など) に適しています keep-all
: 可能な限り改行、中国語や日本語などの連続文字で構成されるテキストに適しています 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 サイトの他の関連記事を参照してください。