CSS はラップしない、CSS はラップする

CSS はフロントエンド開発における重要な技術コンポーネントです。CSS を使用すると、Web ページを最適化および美化できます。非常に重要な側面の 1 つは、テキストのレイアウトとスタイルを調整することです。 CSS には、行折り返しなしと行折り返しという 2 つの一般的に使用されるプロパティがあります。属性設定が異なると、異なる効果が得られます。

CSS は改行しません

CSS の空白属性は、テキストが改行されるかどうかを制御するために使用できます。設定できる値は次のとおりです:

• normal: デフォルト値、自動行折り返し
• nowrap: 行折り返しなし
• pre: すべてのスペースと改行を保持します
• pre-wrap: 保持します改行は保持しますが、自動的に折り返されます
• pre-line: スペースと改行は保持されますが、自動的に折り返されます

このうち、nowrap 値はテキストの折り返しを防ぐことができます。ホワイトスペースの値は継承され、親要素に設定してから子要素に継承できます。

たとえば、次のコードでは、テキストが長すぎる場合に div 要素は自動的に折り返されませんが、拡張され続けます。

<div style="white-space: nowrap;">
  这是一个不会换行的超长文本测试，看看会不会出现换行。
</div>

CSS 改行

同様に、CSS の word-break 属性と word-wrap 属性を使用して改行を制御することもできます。

• word-break 属性は単語内の改行を制御でき、通常は英語や中国語などのさまざまなテキストを制御するために使用されます。その値は次のとおりです。

  • normal: デフォルト値、ブラウザのデフォルトの行折り返し方法を使用します
  • keep-all: すべての単語を 1 行に保ち、自動行折り返しは行いません。
  • break-all: 単一文字が長すぎる場合は、強制的に改行します (単語の境界に関係なく)
  • break-word: 単語全体が長すぎる場合は、強制的に改行します

たとえば、次のコードでは、word-break 属性を介して 1 文字が長すぎる場合、p 要素のテキストが強制的に折り返されます。

<p style="word-break: break-all;">
  这里有一段texttexttexttexttexttexttexttexttexttexttext的文本。
</p>

• word-wrap 属性は、テキストを折り返すときに単語の境界を保持するかどうかを制御するために使用されます。その値は次のとおりです。

  • normal: デフォルト値、ブラウザのデフォルトの改行方法を使用します。
  • break-word: 単語が長すぎる場合、強制的に改行されます。

たとえば、次のコードでは、div 要素のテキストが word-wrap 属性を通じて設定され、行の折り返しが強制的に行われます。単語が長すぎますが、単語の境界は保持する必要があります。

<div style="word-wrap: break-word;">
  这里有一段texttexttexttexttexttexttexttexttexttexttext的文本。
</div>

結論

CSS では、white-space、word-break、word-wrap 属性を使用して、テキストを折り返すかどうかを柔軟に制御できます。実際の開発では、特定のニーズに応じて適切な属性を選択および設定して、最高の読書体験と美的効果を実現できます。

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