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テキスト内のすべてのタグを置き換える方法

推薦する

JavaScript におけるブラウザ互換性の問題について簡単に説明します

ブラウザの互換性は、実際の開発では見落とされがちな最も重要な部分です。古いバージョンのブラウザの互換...

JS 開発効率を上げる4つの超実践的なヒント

目次1. 短絡判定2. オプション連鎖演算子 (?) 3. ヌル合体演算子 (??) 4. 終了関数...

Vueはドラッグアンドドロップを使用して構造ツリーを作成します

この記事の例では、ドラッグアンドドロップを使用して構造ツリーを作成するVueの具体的なコードを共有し...

WeChatアプレット開発によりホームページポップアップボックスアクティビティガイダンス機能が実現

目次1. 需要2. データベース設計3.Javaバックグラウンド構成の実装4. WeChatアプレッ...

MySQL Undo ログと Redo ログの概要

目次元に戻すログUNDOログの生成と破棄UNDOログの保存元に戻すログ機能トランザクションの原子性の...

デザイン: 意志の強いデザイナー

<br />長年の専門的なアートデザイン教育を通じて「美とは何か」を学びましたが、「美を...

SSL で Nginx リバース プロキシを構成する簡単な手順

序文リバース プロキシは、Web 経由で行われたリクエスト (http と https の両方) を...

MySQLクエリが遅い理由

目次1. 遅いところはどこですか? 2. 不要なデータをクエリしましたか? 1. 不要なレコードをク...

MySQL エラー「すべての派生テーブルには独自のエイリアスが必要です」の解決方法

MySQL は、マルチテーブルクエリを実行するときにエラーを報告します。 [SQL] SELECT ...

JavaScriptにおけるこのポインティング問題の詳細な説明

序文JS の this ポインターは、初心者にとって常に頭痛の種でした。今日は、これが地面に落ちたと...

HTMLの表のtbodyは上下左右にスライドできます

テーブル ヘッダーが固定されている場合は、それを 2 つのテーブルに分割する必要があります。1 つの...

Windows での MySQL 5.7.18 のインストールと設定のチュートリアル

この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...

Vue でバイナリ ファイル ストリームを受信して​​ PDF プレビューを実現する方法

バックグラウンド コントローラー @RequestMapping("/getPDFStre...

MySQL 主キー ID を生成する方法 (自己増分、一意、不規則)

目次1. uuid関数を使用して、一意かつ不規則な主キーIDを生成します。 2. idの自動成長1....

レスポンシブフレームワークのテーブルヘッダーの自動改行問題に対する簡単な解決策

最近、Bootstrap を使って Web サイトを開発しています。表を処理していたところ、PC で...