CSS テキストの折り返しを防ぐにはどのような方法を使用できますか?

CSS はフロントエンド開発に不可欠な部分であり、Web ページに美しいスタイルと優れたレイアウト効果を提供します。 Web ページのレイアウトのプロセスにおいて、テキストのレイアウトは非常に重要なリンクです。場合によっては、スペースやブレークポイントを追加せずに、テキストに改行を入れないようにする必要があります。では、CSS テキストの折り返しを防ぐにはどのような方法があるのでしょうか?

1. white-space 属性

white-space 属性は、要素内に空白スペースを設定するために CSS で使用される処理メソッドであり、テキストを自動的に表示するかどうかを制御できます。包みます。この属性には次の値があります。

• normal: デフォルト値、改行文字またはスペースに遭遇するとテキストが自動的に折り返されます。
• nowrap: テキストは折り返されず、強制的に折り返されます。同じ行を表示
• pre: テキストはスペースと改行を保持し、元の形式で表示されます。
• pre-wrap: テキストはスペースと改行を保持しますが、自動的に折り返されます
• pre-line : テキストは改行を保持しますが、スペースは無視されます。複数のスペースがある場合、それらは 1 つのスペースに結合され、テキストは自動的に折り返されます。

#white-space 属性を使用して値を設定できます。nowrap の場合、テキストが折り返されない効果を実現します。例:

p{
  white-space: nowrap;
}

このように、p タグ内のテキストは、スペースまたは改行文字に遭遇したときに自動的に折り返されず、常に同じ行に表示されます。

text-overflow プロパティ

長いテキストを折り返さずに完全なテキスト内容を表示できるようにしたい場合があります。現時点では text-overflow 属性を使用できます。

text-overflow プロパティは、テキストがオーバーフローした場合の表示モードを制御するために CSS で使用されます。この属性には次の値があります:

clip: デフォルト値、テキストのオーバーフロー部分はクリップされ、表示されません。
• ellipsis: オーバーフロー部分には省略記号 # が表示されます。
• # #string: 指定された文字列をオーバーフロー部分に表示します。
• #text-overflow 属性の値を空白属性に基づいて省略記号に設定できるため、長いテキストも表示できます。コンテンツを完成させ、省略記号の効果を表示します。例:

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

このように、p タグ内のテキストが幅制限を超えると、省略記号は表示されますが、折り返されません。

ワードブレイク属性

3. 中国語、日本語、韓国語など、一部の言語では文字を自由に区切ったり折り返したりすることができません。この場合、word-break 属性を使用して、単語が自動的に折り返される方法を制御できます。

word-break 属性は、テキストが自動的に折り返されるときに、連続する文字や文字がどのように処理されるかを制御するために使用されます。この属性には次の値があります。

normal: ブラウザのデフォルトの改行ルールを使用するデフォルト値

• break-all: 単語内の改行
• keep- all: 単語内で改行しない
• セマンティクスを破壊することなく目的を達成するために、white-space 属性に基づいて word-break 属性の値を keep-all に設定できます。 . テキストが折り返されないようにします。例:

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

これにより、テキストが幅制限を超えた場合でも、単語内で改行されません。

まとめ

上記では、CSS テキストの折り返しを防ぐ 3 つの方法として、white-space 属性、text-overflow 属性、word-break 属性を使用する方法を紹介しました。テキストの折り返しを防ぐ必要がある場合は、実際の状況に応じてこれらの方法の 1 つまたは複数の使用を選択できます。これらの属性を使用する場合、最良の効果を得るには、実際の状況に応じて調整する必要があることに注意してください。

以上がCSS テキストの折り返しを防ぐにはどのような方法を使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。