CSSでのスペースの扱い方（例）

この記事の内容はCSSでのスペースの処理方法（例）です。必要な方は参考にしていただければ幸いです。

1. スペースのルール

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

<p>◡◡hello◡◡world◡◡</p>

上記は HTML コードの行で、テキストの前、中、後ろにそれぞれ 2 つのスペースがあります。識別しやすくするために、ここではスペースを表すために半円記号 ◡ が使用されています。 ◡表示空格。

浏览器的输出结果如下。

hello world

可以看到，文字的前部和后部的空格都会忽略，内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。

如果希望空格原样输出，可以使用<pre class="brush:php;toolbar:false"></pre>标签。

<pre class="brush:php;toolbar:false">◡◡hello◡◡world◡◡

另一种方法是，改用 HTML 实体 表示空格。

<p>  hello  world  </p>

二、空格字符

HTML 处理空格的规则，适用于多种字符。除了普通的空格键，还包括制表符（t）和换行符（r和n）。

浏览器会自动把这些符号转成普通的空格键。

<p>hello
world</p>

上面代码中，文本内部包含了一个换行符，浏览器视同为空格，输出结果如下。

hello world

所以，文本内部的换行是无效的（除非文本放在<pre class="brush:php;toolbar:false"></pre>标签内）。

<p>hello<br>world</p>

上面代码使用<br>标签显式表示换行。

三、CSS 的 white-space 属性

HTML 语言的空格处理，基本上就是直接过滤。这样的处理过于粗糙，完全忽视了原始文本内部的空格可能是有意义的。

CSS 提供了一个white-space属性，可以提供更精确一点的空格处理方式。该属性共有六个值，除了一个通用的inherit（继承父元素），下面依次介绍剩下的五个值。

3.1 white-space: normal

white-space属性的默认值为normal，表示浏览器以正常方式处理空格。

<p>◡◡hellohellohello◡hello
world
</p>

上面代码中，文本前部有两个空格，内部有一个长单词和一个换行符。

然后，容器<p></p>指定一个比较小的宽度。为了便于识别，背景色设为红色。

p {
  width: 100px;
  background: red;
}

显示效果如下图。

可以看到，文首的空格被忽略。由于容器太窄，第一个单词溢出容器，然后在后面一个空格处换行。文本内部的换行符自动转成了空格。

3.2 white-space: nowrap

white-space属性为nowrap时，不会因为超出容器宽度而发生换行。

p {
  white-space: nowrap;
}

显示效果如下图。

所有文本显示为一行，不会换行。

3.3 white-space: pre

white-space属性为pre时，就按照<pre class="brush:php;toolbar:false"></pre>标签的方式处理。

p {
  white-space: pre;
}

显示效果如下图。

上面结果与原始文本完全一致，所有空格和换行符都保留了。

3.4 white-space: pre-wrap

white-space属性为pre-wrap时，基本还是按照<pre class="brush:php;toolbar:false"></pre>标签的方式处理，唯一区别是超出容器宽度时，会发生换行。

p {
  white-space: pre-wrap;
}

显示效果如下图。

文首的空格、内部的空格和换行符都保留了，超出容器的地方发生了折行。

3.5 white-space: pre-line

white-space属性为pre-line时，意为保留换行符。除了换行符会原样输出，其他都与white-space:normal规则一致。

p {
  white-space: pre-line;
}

显示效果如下图。

除了文本内部的换行符没有转成空格，其他都与normal

ブラウザの出力は次のとおりです。

rrreee

テキストの前後のスペースは無視され、内部の連続したスペースは 1 つとしてのみカウントされることがわかります。これは、ブラウザがスペースを処理するための基本的なルールです。

スペースをそのまま出力したい場合は、<pre class="brush:php;toolbar:false"></pre>タグを使用できます。 rrreee

代わりに、HTML エンティティ   を使用してスペースを表すこともできます。 🎜rrreee🎜🎜2. スペース文字🎜🎜🎜スペースを処理するための HTML のルールは、さまざまな文字に適用されます。通常のスペースバーに加えて、タブ文字 (t) および改行文字 (r および n) も含まれます。 🎜🎜ブラウザはこれらの記号を通常のスペースキーに自動的に変換します。 🎜rrreee🎜 上記のコードでは、テキストに改行文字が含まれていますが、ブラウザではスペースとして認識されます。出力結果は次のようになります。 🎜rrreee🎜 したがって、テキスト内の改行は無効です (テキストが <pre class="brush:php;toolbar:false"></pre> タグ内に配置されていない限り)。 🎜rrreee🎜上記のコードは、 <br> タグを使用して改行を明示的に示しています。 🎜🎜🎜3. CSSの空白属性🎜🎜🎜HTML言語における空白処理は、基本的にはダイレクトフィルタリングです。この扱いはあまりにも粗雑であり、元のテキスト内の空白に意味がある可能性があるという事実を完全に無視しています。 🎜🎜CSS は、スペースをより正確に処理する方法を提供できる white-space 属性を提供します。この属性には、一般的な inherit (親要素の継承) に加えて、合計 6 つの値があります。残りの 5 つの値を以下に紹介します。 🎜

3.1 ホワイトスペース: 通常

🎜 white-space 属性のデフォルト値は normal です。これは、ブラウザが空白文字を処理することを意味します。通常の方法。 🎜rrreee🎜 上記のコードでは、テキストの前に 2 つのスペースがあり、その中に長い単語と改行文字があります。 🎜🎜次に、コンテナ <p></p> はより小さい幅を指定します。識別しやすいように、背景色は赤に設定されています。 🎜rrreee🎜 表示効果は以下の通りです。 🎜🎜🎜🎜ご覧のとおり、先頭のスペースは無視されます。コンテナーが狭すぎるため、最初の単語がコンテナーからはみ出し、その後の 1 つのスペースで折り返されます。テキスト内の改行は自動的にスペースに変換されます。 🎜

3.2 ホワイトスペース: nowrap

🎜 white-space 属性が nowrap の場合、コンテナの幅を超えることによる行の折り返しは発生しません。 🎜rrreee🎜 表示効果は以下の通りです。 🎜🎜🎜🎜すべてのテキストが表示されますとして 1 行で、改行はありません。 🎜

3.3 ホワイトスペース: pre

🎜white-space 属性が pre の場合、<pre class="brush:php;toolbar:false"></pre> に従います。ラベル加工。 🎜rreee🎜 表示効果は以下の通りです。 🎜🎜🎜🎜上記の結果は次のとおりですオリジナルと同じ テキストはまったく同じで、スペースと改行はすべて保持されます。 🎜

3.4 ホワイトスペース: pre-wrap

🎜white-space 属性が pre-wrap の場合、基本的には タグとの唯一の違いは、コンテナの幅を超えると改行が発生することです。 🎜rreee🎜 表示効果は以下の通りです。 🎜🎜<img class="has lazy" src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/009/dcf76109db1addcad243bdb295a1c3f5-4.png?x-oss-process=image/resize,p_40" alt="">🎜🎜先頭にスペース記事の内部スペースと改行文字は保持され、コンテナを超えて改行が発生します。 🎜<h3 id="ホワイトスペース-行前">3.5 ホワイトスペース: 行前</h3>🎜 <code>white-space 属性が pre-line の場合、改行文字を保持することを意味します。そのまま出力される改行を除いて、他のすべては white-space:normal ルールと一致します。 🎜rrreee🎜 表示効果は以下の通りです。 🎜🎜🎜🎜改行文字内のテキストはスペースに変換されません。その他の処理ルールは normal と一致します。これは詩的なテキストに便利です。 🎜🎜おすすめ関連記事: 🎜🎜🎜divタグ: 水平センタリングと垂直センタリングの実装(コード付き) 🎜🎜

CSSのtext-transform属性を使用して文字列変換を実装するコード

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