CSS コンテンツが折り返されない場合はどうすればよいですか?

CSS は Web デザインの重要な部分であり、色、フォント、レイアウトなどのさまざまなスタイルを Web ページに追加できます。その中でも、コンテンツ行の折り返しも CSS の重要なスタイルであり、ページ上のテキスト レイアウトを調整する必要がある場合、コンテンツ行の折り返しは特に重要です。

CSS では、ブラウザはプロパティを使用してテキストの自動折り返しを制御します。デフォルトでは、テキストはブラウザのワードラップメカニズムによって決定されるコンテナに従って折り返されます。ただし、テキストがコンテナ内で折り返されないようにしたい場合は、次のメソッドを使用してこれを実現できます。

1. ホワイトスペース属性を使用する

ホワイトスペース属性は、テキストスペースと改行の表示方法を制御できます。

空白属性には、normal、nowrap、pre、および pre-wrap という 4 つの値があります。このうち、normal がデフォルト値です。 nowrap は、テキストがコンテナからはみ出しても自動的に折り返されないことを意味します。pre は、テキスト内で改行が保持されますが、テキストがコンテナの端で自動的に折り返されないことを意味します。pre-wrap は、テキストがコンテナの端で自動的に折り返されないことを意味します。コンテナの端に改行がある場合は、改行にする必要があります。

サンプル コードは次のとおりです。

div {
  width: 200px;
  height: 100px;
  white-space: nowrap;
}

上記のコードは、幅 200 ピクセル、高さ 100 ピクセルの div 要素内のすべてのテキストが自動的に折り返されないようにします。空白属性を pre に変更すると、テキスト内に表示される改行は保持されます。事前に折り返す場合、テキストはコンテナの端で改行することができます。

2. text-overflow 属性を使用する

text-overflow 属性は、テキストがコンテナからオーバーフローした場合に、オーバーフローしたコンテンツを指定された文字で置き換えるのに使用されます。

text-overflow 属性には、clip、ellipsis、string の 3 つの値があります。このうち、clip はデフォルト値でテキストがコンテナから溢れた場合にテキストを非表示にすることを意味し、ellipsis は溢れたテキストに省略記号を表示することを意味し、string は指定した文字をテキストの代わりに表示することを意味します。省略記号。

サンプル コードは次のとおりです。

div {
  width: 200px;
  height: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

上記のコードは、幅 200 ピクセル、高さ 100 ピクセルの div 要素内のテキストがオーバーフローした場合に省略記号に置き換えます。

3. word-break 属性を使用する

word-break 属性は、単語の分割方法と折り返し方法を制御できます。

word-break 属性には、normal、break-all、および keep-all という 3 つの値があります。このうち、normal はデフォルト値で、ブラウザが任意の場所で単語を改行できることを意味します。break-all は単語内の改行を意味し、keep-all は中国語や日本語などの文字での改行を防止することを意味します。

サンプル コードは次のとおりです。

div {
  width: 200px;
  height: 100px;
  word-break: keep-all;  
}

上記のコードは、幅 200 ピクセル、高さ 100 ピクセルの div 要素内のテキスト内の中国語または日本語の文字が折り返されるのを防ぎます。

つまり、CSS で非改行コンテンツを実現するには、空白、テキスト オーバーフロー、ワード ブレーク、その他の属性を使用してこれを実現できます。これらの属性を使用すると、Web ページの読みやすさと美しさが向上し、ユーザー エクスペリエンスが向上します。

以上がCSS コンテンツが折り返されない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。