CSSでスペースを扱う方法

空白属性

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

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

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

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

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

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

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

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

//m.sbmmt.com/course/list/12.html

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

p {
    white-space: nowrap;
}

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

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

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