`white-space` と `overflow` を使用して CSS でテキストの折り返しを制御するにはどうすればよいですか?

テキストの回り込みの制御: '空白' とその先の探索

Web 開発では、テキストの書式設定の管理は美しさと読みやすさにとって非常に重要です。ただし、場合によっては、テキストが意図した境界を超えて拡張され、望ましくない改行が発生することがあります。これに対処するには、CSS の 'white-space' プロパティが不可欠であることがわかります。

'white-space' を 'nowrap' に設定すると、要素内でテキストが折り返されないようにブラウザに指示され、基本的に要素上にテキストが残るようになります。単線。このテクニックは、制約ベースのレイアウトを操作する場合、または狭い領域でテキスト フローを制御する場合に特に役立ちます。

「空白」に加えて、テキストの回り込みに影響を与える可能性のあるもう 1 つのプロパティは「オーバーフロー」です。 「オーバーフロー」を「非表示」に設定すると、要素の境界を越える余分なコンテンツを切り詰めて、事実上ビューから隠すことができます。これを「text-wrap」と組み合わせて、制御された 1 行のテキスト表示を作成できます。

「空白」と「オーバーフロー」の両方を使用するコード例を次に示します。

div {
  white-space: nowrap;
  overflow: hidden;
  height: 30px;
  max-width: 200px;
}

このコードは、div 要素内のテキストの幅を 200 ピクセルに制限し、高さを 30 ピクセルに設定します。この div 内のテキストは、複数行に折り返されることなく、要素の末尾に達するまで水平方向に流れるようになります。

古いブラウザでは「テキストの回り込み」がサポートされていない可能性があることに注意することが重要です。互換性を考慮して、目的の効果を実現するには、「空白」と「オーバーフロー」を組み合わせて使用​​することをお勧めします。

以上が`white-space` と `overflow` を使用して CSS でテキストの折り返しを制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。