改行を無効にするCSS-フロントエンドQ&A-php.cn

改行を無効にするCSS

PHPz

リリース： 2023-05-21 11:56:08

オリジナル

6102 人が閲覧しました

改行を禁止するCSS

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

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

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

nowrap: 改行を禁止しますが、スペースは許可します
pre: スペースと改行を保持しますが、自動的に折り返しません行数
pre-wrap: スペースと改行を保持し、行を適切な位置で自動的に折り返す
pre-line: 改行を禁止しますが、スペースは許可し、適切な位置で行を自動的に折り返します

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

This is a sample text that will not be wrapped.

ログイン後にコピー

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

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

https://www.example.com/es?hl=zhcn&tab=rw

ログイン後にコピー

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

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

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

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