CSSはテキストの折り返しを防ぎます

Web デザインと開発では、通常、ページ要素のレイアウトとスタイルを制御する必要があります。テキスト レイアウトに関する最も一般的な問題の 1 つは、テキストの折り返しを防ぐ方法です。この記事では、この問題の解決に役立つ CSS の一般的な方法をいくつか紹介します。

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

white-spaceこの属性は、要素ボックス内のホワイトスペースの処理方法を決定します。オプションの値は 5 つあります: 通常の 、nowrap、pre、pre-wrap、pre-line。その効果は次のとおりです:

• #normal: デフォルト値、余分な空白を結合、テキストは折り返されません、テキストが 1 行に収まらない場合は自動的に折り返されます。
• nowrap: 改行はありません。これは、normal と pre;
• pre の機能を組み合わせたものと同等です。 : 予約済み 余分な空白、マージなし、行の折り返しなし。行を折り返す必要がある場合は、手動で `` を追加する必要があります;
  
• pre-wrap: 余分なスペースは保持します空白、マージなし、必要に応じて自動行折り返し。行折り返しの場合、自動的に折り返します。
• pre-line: 余分な空白とテキストをマージします。 1 行に収まらない場合は自動的に折り返されます。

したがって、テキストが自動的に折り返されないようにする必要がある場合は、

white-space: nowrap を使用できます。

div {
  white-space: nowrap;
}

もちろん、余分な空白を保持したい場合は、他の値を使用することもできます。たとえば、テキストを 1 行に完全に表示したい場合は、

white-space: pre を使用できます。

div {
  white-space: pre;
}

2. word-break 属性

white-space 属性を設定した後、テキストの長さがボックスの幅を超える場合、自動的に折り返されます。現時点では、テキストの改行を制御するために word-break 属性を使用する必要があります。これには 3 つのオプション値があります: normal、break-all 、 ＃＃＃ すべて保ちます＃＃＃。それらの効果は次のとおりです:

normal

: デフォルト値、標準の単語分割ルールに従って単語間で改行;
• break -all
: 単語間で改行し、英単語内では改行のルールを考慮しません;
• keep-all
: 単語間で、ただし英単語内では改行します これを続けます。
• したがって、
word-break

属性の値を

keep-all に設定することで、テキストが自動的に折り返されないようにできます。

div {
  white-space: nowrap;
  word-break: keep-all;
}

3. オーバーフロー属性

white-space

と

word-break によって正しいテキスト レイアウトが設定されていても、場合によっては、属性によっては、テキストの長さがボックスの幅を超える場合もあります。現時点では、overflow 属性を使用してテキストのオーバーフロー効果を制御する必要があります。 overflow 属性には、visible、hidden、scroll、auto の 4 つのオプション値があります。それらの効果は次のとおりです: #visible

: デフォルト値、処理は実行されず、ボックスの範囲を超えたコンテンツがボックスの外に表示されるようになります。 # hidden

: オーバーフロー部分は非表示で非表示になります;
• scroll
: スクロール バーが表示され、ユーザーはスクロール バーを通じてオーバーフロー部分を表示できます;
• auto
: 実際のニーズに応じてスクロール バーを表示します。
• 自動行折り返しを行わずにテキストを 1 行で表示し、オーバーフロー部分を非表示にしたい場合は、
white-space
• と overflow を使用できます。 プロパティの組み合わせ。

div {
  white-space: nowrap;
  overflow: hidden;
}

4. text-overflow 属性

overflow: hidden 属性を使用してテキスト オーバーフロー部分を非表示にすると、ユーザーにテキスト全体が表示されなくなる可能性があります。コンテンツ。現時点では、text-overflow

属性を使用してテキストのオーバーフロー効果を制御できます。

text-overflow

属性には、

clip、ellipsis という 2 つのオプションの値があります。それらの効果は次のとおりです: clip: テキストを切り詰め、省略記号を追加せずに余分な部分を非表示にします;

ellipsis

: テキストを切り詰めます、余分な部分を非表示にし、省略記号 (
• ...) を追加します。
• したがって、text-overflow 属性の値を ellipsis に設定することで、長すぎるテキストを切り詰めて省略記号を追加できます。

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

5. 疑似要素を使用する

上記の方法に加えて、CSS の疑似要素を使用して、テキストが自動的に折り返されないように制御することもできます。たとえば、「」を使用できます。

以上がCSSはテキストの折り返しを防ぎますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。