CSSでスペースを扱う方法

空白属性

CSS は、スペースをより正確に処理する方法を提供できる空白属性を提供します。この属性には合計 6 つの値があり、共通の継承 (親要素の継承) に加えて、残りの 5 つの値を以下に紹介します。

1. ホワイトスペース:normal

ホワイトスペース属性のデフォルト値は通常であり、ブラウザが通常の方法でスペースを処理することを意味します。

html:
    <p>  hellohellohello hello
    world
    </p>
style:
    p {
        width: 100px;
        background: red;
    }

上記のコードでは、テキストの前に 2 つのスペースがあり、その中に長い単語と改行文字があります。

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

#関連チュートリアルの推奨事項:

CSS ビデオ チュートリアル、学習アドレス:

https://www.php.cn/course/list/12.html

#2.white-space: nowrap

white-space 属性が nowrap の場合、コンテナの幅を超えるため改行は発生しません。

p {
    white-space: nowrap;
}

すべてのテキストは改行なしで 1 行として表示されます。

3. ホワイトスペース: pre

ホワイトスペース属性が pre の場合、

 タグに従って処理されます。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">p {
    white-space: pre;
}

ログイン後にコピー

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

4.white-space: pre-wrap

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

p {
    white-space: pre-wrap;
}

テキストの先頭のスペース、内部スペース、改行はすべて保持され、コンテナを超えて改行が発生します。

5. ホワイトスペース: pre-line

ホワイトスペース属性が pre-line の場合、改行文字を保持することを意味します。そのまま出力される改行文字を除いて、他のすべてはwhite-space:normalルールと一致します。

p {
    white-space: pre-line;
}

本文中の改行をスペースに変換しない以外は、その他の処理規則は通常と同様です。これは詩的なテキストに便利です。

プログラミング関連のコンテンツの詳細については、php 中国語 Web サイトの

プログラミング入門

列に注目してください。

以上がCSSでスペースを扱う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。