改行のないCSSコードとは何ですか?

CSS 非行折り返しコード

Web デザインでは、テキストの折り返しは非常に重要な問題です。継続的な画面の増加と解像度の向上に伴い、Web ページ内のテキストがますます増加しており、さまざまな画面サイズでテキストを適応させ、自動的に折り返す方法は、Web デザイナーが考慮する必要がある問題の 1 つとなっています。

この記事では、テキストの折り返しに対処する方法をよりよく理解できるように、CSS でテキストが折り返されないようにするいくつかの方法について説明します。

1. ホワイトスペース属性

CSS のホワイトスペース属性は、テキスト内のスペース、改行、その他の文字の表示を制御します。具体的には、この属性には次の値があります:

1. normal: デフォルト値。自動的に折り返すと、境界に到達したかどうかに関係なく、複数のスペースが 1 つのスペースにマージされます。
2. nowrap: 行の折り返しはありません。テキストはコンテナのサイズに合わせて自動的に縮小されます。
3. 前: スペースと改行を保持し、複数のスペースを結合せず、自動的に行を折り返さないようにします。
4. pre-wrap: 行を自動的に折り返しますが、スペースと改行は保持します。
5. pre-line: 複数のスペースを自動的に結合し、行を自動的に折り返します。

空白属性を使用すると、テキストの行の折り返しを非常に簡単に制御でき、実際のニーズに応じてさまざまな値を選択できます。

2. Word-break 属性

word-break 属性は、行内のテキストの折り返しを制御するために使用されますが、行を折り返すという点で、white-space 属性とは異なります。言葉の中で。

この属性には次の値があります:

1. normal: デフォルト値。テキストは自動的に折り返されますが、単語内では折り返されません。
2. break-all: テキストはどこででも分割できます (単語の中を含む)。
3. keep-all: 単語がコンテナの幅を超えない限り、単語内で改行を許可しません。

空白属性とは異なり、word-break 属性は単語内の改行でのみ機能することに注意してください。

3. Overflow-wrap 属性

overflow-wrap 属性は、単語がコンテナに完全に収まらない場合の処理​​方法を指定するために使用されます。 word-break 属性と同様、この属性は単語内の改行にのみ影響します。

この属性には次の 2 つの値があります:

1. normal: デフォルト値。通常のルールに従って行を折り返します。
2. break-word: 単語がそのコンテナに完全に収まらない場合は、途中で区切って次の行に継続することができます。

4. text-overflow 属性

text-overflow 属性は、テキストがコンテナ境界からはみ出した場合の処理​​方法を指定するために使用されます。このプロパティは、オーバーフロー プロパティが非表示またはスクロールに設定されている場合にのみ機能し、ブロック レベルの要素の幅に対してのみ機能します。

この属性には次の 3 つの値があります:

1. clip: デフォルト値。余分なコンテンツを直接カットします。
2. 省略記号: テキストがコンテナの境界を越える場合は、テキストの最後に省略記号を追加します。
3. string: 「...」などを使用して、表示テキストがコンテナの境界からはみ出す場合のスタイルをカスタマイズします。

概要

上記の議論を通じて、次の結論を導き出すことができます:

1. 空白属性を使用してテキストの行折り返しを制御する実際のニーズに応じて、さまざまな値を選択してください。
2. word-break プロパティと overflow-wrap プロパティは、単語内の改行でのみ機能します。
3. text-overflow 属性を使用して、テキストがコンテナ境界からオーバーフローした場合の処理​​方法を制御します。

実際の Web デザインにおいて、テキスト行の折り返しの問題は複雑かつ重要な問題であり、特定の状況に応じて適切な解決方法を選択する必要があります。状況に応じて、属性が異なると効果も異なるため、特定のニーズに応じて選択する必要があります。この記事の紹介が、CSS でテキストを折り返さない方法をよりよくマスターするのに役立つことを願っています。

以上が改行のないCSSコードとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。