CSSでスペースを処理する方法

1. 宇宙のルール

HTML コード内の空白は通常、ブラウザによって無視されます。

<p> こんにちは世界 </p>

上記は、テキストの先頭、内部、末尾に 2 つのスペースがある HTML コード行です。

ブラウザの出力は次のようになります: hello world

ご覧のとおり、テキストの先頭と末尾のスペースは無視され、内部の連続したスペースは 1 つとしてカウントされます。これはブラウザがスペースを処理する基本的なルールです。

スペースをそのまま出力したい場合は、<pre> タグを使用します。

<pre> こんにちは世界 </pre>
別の方法としては、代わりに HTML エンティティを使用してスペースを表すことです。
<p> こんにちは世界 </p>

2. スペース文字

HTML の空白処理ルールは多くの文字に適用されます。通常のスペースバーに加えて、タブ (t) と改行 (r と n) も含まれます。

ブラウザはこれらの記号を通常のスペースキーに自動的に変換します。

<p>こんにちは
世界</p>

上記のコードでは、テキストに改行が含まれており、ブラウザはそれをスペースとして扱います。出力は次のようになります: hello world

したがって、テキスト内の改行は効果がありません (テキストが <pre> タグで囲まれていない限り)。

<p>こんにちは<br>世界</p>

上記のコードは

タグは明示的に改行を示す

3. CSSの空白プロパティ

HTML 言語のスペース処理は基本的に直接フィルタリングです。これはあまりにも粗雑な扱いであり、元のテキスト内のスペースが意味を持つ可能性があるという事実を完全に無視しています。

CSS には、スペースをより正確に処理できる空白プロパティが用意されています。この属性には 6 つの値があり、共通の inherit (親要素を継承) を除いて、残りの 5 つの値を以下に紹介します。

3.1 空白: 通常

white-space プロパティのデフォルト値は normal です。これは、ブラウザーが空白を通常の方法で処理することを意味します。

html:
    <p> こんにちはこんにちはこんにちはこんにちは
    世界
    </p>
スタイル：
    ｐ {
        幅: 100ピクセル;
        背景: 赤;
    }

上記のコードでは、テキストの先頭に 2 つのスペースがあり、内部に長い単語と改行があります。

先頭のスペースは無視されます。コンテナーが狭すぎるため、最初の単語がコンテナーから溢れ、次のスペースで折り返されます。テキスト内の改行は自動的にスペースに変換されます。

3.2 空白: 折り返しなし

white-space プロパティが nowrap の場合、コンテナーの幅を超えたために改行は発生しません。

ｐ {
    空白: ラップなし;
}

すべてのテキストは折り返されずに 1 行に表示されます。

3.3 空白: 前

空白属性が pre の場合、<pre> タグと同じように処理されます。

ｐ {
    空白: 前;
}

上記の結果は元のテキストとまったく同じであり、すべてのスペースと改行が保持されます。

3.4 空白: 事前ラップ

white-space 属性が pre-wrap の場合、基本的には <pre> タグと同じように処理されます。唯一の違いは、コンテナの幅を超えた場合に改行が発生することです。

ｐ {
    空白: 事前ラップ;
}

テキストの先頭のスペース、テキスト内のスペース、および改行はすべて保持され、コンテナーを超える場所では行が折り返されます。

3.5 空白: 行前

white-space プロパティが pre-line の場合、改行を保持することを意味します。改行がそのまま出力されることを除いて、その他すべては white-space:normal ルールと一致しています。

ｐ {
    空白: 行前;
}

テキスト内の改行がスペースに変換されないことを除いて、その他はすべて通常の処理ルールと同じです。これは詩のようなテキストに役立ちます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。