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

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>
スタイル:
    p {
        幅: 100ピクセル;
        背景: 赤;
    }

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

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

3.2 空白: 折り返しなし

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

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

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

3.3 空白: 前

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

p {
    空白: 前;
}

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

3.4 空白: 事前ラップ

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

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

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

3.5 空白: 行前

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

p {
    空白: 行前;
}

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

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

<<:  ウェブデザインの概要

>>:  HTMLテキスト内のすべてのタグを置き換える方法

推薦する

MySQL における datetime と timestamp の違いと使い方

1. MySQL で現在の時刻を表現するにはどうすればよいでしょうか?実際、表現方法はいろいろありま...

ウェブページデザインのための4つの実践的なヒント

関連記事: Web コンテンツ ページを作成するための 9 つの実用的なヒント<br />...

MySQL 接続数を設定する方法 (接続数が多すぎる)

mysql使用中に接続数が超過していることが判明しました~~~~ [root@linux-node...

js のマクロタスクとマイクロタスクについての簡単な説明

目次1. JavaScriptについて2. JavaScript イベントループ3. マクロタスクと...

Ubuntu 18.04 のインストールで「ldlinux.c32 のロードに失敗しました」というエラーが表示され、解決手順がわかりません

序文私は Win7 を搭載した古いラップトップを持っています。古いシステムを維持しながら、同時に U...

HTML ページ ソース コード レイアウトの概要_Powernode Java Academy

HTML ページ ソース コード レイアウトの概要この紹介では、Google のホームページのソー...

MLSQL スタックでストリームのデバッグを簡単にする方法

序文クラスメートが MLSQL Stack のストリーミング サポートを調査しています。そこで、フロ...

Ubuntu16.04 インストール mysql5.7.22 グラフィックチュートリアル

VMware12.0+Ubuntu16.04+MySQL5.7.22 インストールチュートリアルの詳...

優れたユーザー インターフェース デザインのための 37 のヒント (画像付き)

1. 複数列レイアウトではなく、単一列レイアウトを使用する1 列のレイアウトにより、全体的な状況をよ...

MySql テーブル、データベース、シャーディング、パーティショニングの知識ポイントの紹介

1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...

Linux での UDP について学ぶ

目次1. UDPとLinuxの基礎の紹介2. 各機能の使い方1. ソケット機能の使用2. バインド機...

mysql データベースの作成、ユーザーの追加、ユーザー認証の実用的な方法

1. MySQLデータベースを作成する1. データベース構文を作成する --「testdb」という名...

mysql5.7のインストールとNavicateの長期無料利用の実施手順

(I) mysql5.7のインストール: ❀詳細:無料のグリーンバージョン5.7のインストール方法は...

突然外部ネットワークからDockerにアクセスできなくなる問題の解決方法

マスターのメソッドによると、原因は sysctl net.ipv4.ip_forward であること...

Linux で同じ内容のファイルを識別する方法の詳細な説明

序文ファイルのコピーによってハードドライブのスペースが大量に浪費され、ファイルを更新するときに混乱が...