HTML空白の処理ルール
HTMLにおける「空白」には、スペース（スペース）、タブ（タブ）、改行（CR/LF）の3種類があります。
デフォルトでは、HTML ソース コード内の空白文字はスペースとして表示され、複数の連続する空白文字は 1 つとして扱われる、つまり、複数の連続する空白文字はマージされることがわかっています。
ただし、場合によっては、HTML ソース コード内の複数の連続するスペースを Web ブラウザーで現実的に表示できることを望んだり、ソース コード内の改行が実際の改行として機能する必要がある場合があります。そこで、内部テキスト内の空白文字の実際の状況を真に復元できる <pre> タグを発見しました。
そのため、コンピュータ コードを表すテキストを <pre> タグに挿入することがよくあります。これにより、インデントを制御するための追加のスタイルやタグを追加することなく、独自のスペース インデントと行折り返し効果がブラウザに表示されます。そして改行。
CSS についての理解が深まるにつれ、これらすべてが空白属性によって整理されていることがわかります。 <pre> 要素が非常に魅力的な理由は、この要素がデフォルトのスタイル {white-space: pre;} を持っているためです。
ホワイトスペース属性
CSSの空白属性は、空白文字を結合するかどうか、改行を保持するかどうか、自動行折り返しを許可するかどうかなど、テキストの空白文字の処理ルールを設定するために使用されます。各属性値のさまざまな動作を次の表に示します。
空白属性値のリスト
| 属性値 | 空白 | 改行文字 | 自動行折り返し | 最初に登場したのは |
|---|---|---|---|---|
normal | マージ | 無視する | 許可する | CSS1 |
nowrap | マージ | 無視する | 許可されていません | CSS1 |
pre | 予約する | 予約する | 許可されていません | CSS1 |
pre-wrap | 予約する | 予約する | 許可する | CSS2.1 |
pre-line | マージ | 予約する | 許可する | CSS2.1 |
(注: CSS1/2 では、空白属性はブロックレベルの要素にのみ適用できます。CSS 2.1 では、すべての要素に適用できます。)
コンテナ要素に <pre> 要素と同様の空白処理動作を持たせる必要がある場合は、それに {white-space: pre;} スタイルを設定するだけです。
事前のラッピングが必要
まず、上の表の「自動ワードラップ」の動作について説明します。これは、テキストの方向に入力されている要素内のテキストフローが、折り返すか、テキストフローの継続を制限する境界に遭遇することを指します。ない。 「単語の折り返しを許可しない」とは、テキスト フローが要素からオーバーフローすることを意味します。
したがって、{white-space: pre;} スタイルは期待を満たさない場合があります。たとえば、特別な厳密性を必要としない状況や、改行の影響を受けない一部のコード スニペット (HTML や CSS など) をフォーマットする場合、コード スニペット内の長いコード行によってエラーが発生することは望ましくありません。読みにくいため、コンテナ要素を水平方向にスクロールします。この場合、長いコードが自動的にラップされることを期待します。
この時点で、上の表の各属性値のさまざまな動作特性を比較すると、ラップ前の属性値が際立っていることがわかります。これはまさに必要なものです。