How to handle spaces in CSS (example)

The content of this article is about how to process spaces in CSS (examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

<p>1. Space rules

<p>Spaces in HTML code are usually ignored by browsers.

<p>

<p>The above is a line of HTML code, with two spaces each in the front, inside and back of the text. For ease of identification, the semicircular symbol ◡ is used here to represent spaces.

<p>The browser output is as follows.

<p>As you can see, the spaces at the front and back of the text will be ignored, and the consecutive spaces inside will only be counted as one. This is the basic rule for browsers to handle spaces.

<p>If you want the spaces to be output as they are, you can use the <pre class="brush:php;toolbar:false">&lt;/code&gt; tag. &lt;/p&gt;&lt;div class=&quot;code&quot; style=&quot;position:relative; padding:0px; margin:0px;&quot;&gt;&lt;pre class=&quot;brush:html;toolbar:false&quot;&gt;&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;◡◡hello◡◡world◡◡</pre></pre><div class="contentsignin">Copy after login</div></div><p>An alternative is to use HTML entities <code> to represent spaces instead.

<p>2. Space characters

<p>HTML’s rules for processing spaces apply to a variety of characters. In addition to the normal space bar, it also includes tab characters (\t) and newline characters (\r and \n).

<p>The browser will automatically convert these symbols into ordinary space keys.

<p>In the above code, the text contains a newline character, which is regarded as a space by the browser, and the output result is as follows.

<p>So, line breaks within the text are invalid (unless the text is placed within the <pre class="brush:php;toolbar:false">&lt;/code&gt; tag). &lt;/p&gt;&lt;div class=&quot;code&quot; style=&quot;position:relative; padding:0px; margin:0px;&quot;&gt;&lt;pre class=&quot;brush:html;toolbar:false&quot;&gt;&lt;p&gt;hello&lt;br&gt;world&lt;/p&gt;</pre><div class="contentsignin">Copy after login</div></div><p>The above code uses the <code><br> tag to explicitly indicate line breaks.

<p>3. The white-space attribute of CSS

<p>The space processing in HTML language is basically direct filtering. Such processing is too crude and completely ignores the fact that the whitespace inside the original text may be meaningful.

<p>CSS provides a white-space attribute, which can provide a more precise way to handle spaces. This attribute has six values ​​in total. In addition to a common inherit (inheriting the parent element), the remaining five values ​​are introduced below.

3.1 white-space: normal

<p>The default value of the white-space attribute is normal, indicating that the browser handles spaces in a normal manner.

<p>In the above code, there are two spaces in front of the text, a long word and a newline character inside.

<p>Then, the container <p>specifies a relatively small width. For easier identification, the background color is set to red.

<p>The display effect is as shown below.

<p>

<p>As you can see, the spaces at the beginning of the text are ignored. Because the container is too narrow, the first word overflows the container and wraps one space after it. Line breaks within the text are automatically converted to spaces.

3.2 white-space: nowrap

<p>white-spaceWhen the attribute is nowrap, line breaks will not occur due to exceeding the width of the container.

<p>The display effect is as shown below.

<p>

<p>All text is displayed as one line without line breaks.

3.3 white-space: pre

<p>white-spaceWhen the attribute is pre, follow

</code> Label processing. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">p {
  white-space: pre;
}

Copy after login

p {
  white-space: pre-wrap;
}

p {
  white-space: pre-line;
}