改行を無効にするCSS

改行を禁止するCSS

Webデザインでは改行を禁止したい場面によく遭遇します。たとえば、テキストに長いリンクや画像の URL を挿入する必要がありますが、これらのリンクが 2 行以上にまたがると、ページの美観が損なわれ、ユーザーの読書体験に影響を及ぼします。この時点で、CSS を使用して改行を無効にする必要があります。

CSS には、改行を禁止するために使用できる 2 つのプロパティ、つまり「white-space」と「word-break」があります。

#white-space 属性

white-space 属性は、スタイル要素内のスペースと改行を制御するために使用されます。次の値があります:

normal: 通常の状況でのスペースと改行を示すデフォルト値
• nowrap: 改行を禁止しますが、スペースは許可します
• pre: スペースと改行を保持しますが、自動的に折り返しません行数
• pre-wrap: スペースと改行を保持し、行を適切な位置で自動的に折り返す
• pre-line: 改行を禁止しますが、スペースは許可し、適切な位置で行を自動的に折り返します

nowrap 属性を使用して、要素内での改行を禁止できます。たとえば、次の例のテキストは強制的に 1 行で表示されます。

<p style="white-space:nowrap;">This is a sample text that will not be wrapped.</p>

word-break 属性

word-break 属性は次の目的で使用されます。ワードラップ処理方法を制御します。次の値があります:

normal: デフォルト値、単語の後に続くようにします
• break-all: 単語が長すぎる場合、強制的にnewline
• keep-all: 文字列に特定の東アジア文字 (中国語、日本語、韓国語など) が含まれている場合、単語は分割されません

要素内の単語の行折り返しを禁止するbreak-all属性。たとえば、次の例の長い URL リンクは強制的に折り返されます:

<p style="word-break:break-all;">https://www.example.com/es?hl=zhcn&tab=rw</p>

要素内で空白属性と単語区切り属性の両方が使用されている場合、それらの優先順位は異なることに注意してください。 。具体的には、単語区切り属性は空白属性よりも優先されます。つまり、改行を強制してすべてのスペースを保持したい場合は、word-break:break-all;white-space:pre-wrap; を使用する必要がありますが、white-space:pre-wrap;word-break:break は使用しないでください。 -全て;。

さらに、実際の使用では、これらの CSS スタイルを CSS ファイルに追加して呼び出すことで、Web ページを美しくするという目的を達成できます。

以上、改行を無効にするCSSテクニックの紹介でしたので、ご参考になれば幸いです。

以上が改行を無効にするCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。