How to handle spaces in css

white-space attribute

CSS provides a white-space attribute that 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.

1. white-space: normal

The default value of the white-space attribute is normal, which means that the browser handles spaces in a normal way.

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

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

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.

Related tutorial recommendations:

CSS video tutorial, learning address: https://www.php.cn/course/list/12.html

2. white-space: nowrap

When the white-space attribute is nowrap, line breaks will not occur because the width of the container is exceeded.

p {
    white-space: nowrap;
}

All text is displayed as one line without line breaks.

3. white-space: pre

When the white-space attribute is pre, it will be processed according to the

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

Copy after login

The above result is exactly the same as the original text, all spaces and newlines are preserved.

4. white-space: pre-wrap

When the white-space attribute is pre-wrap, it is basically processed in the same way as the

 tag. The only The difference is that when the width of the container is exceeded, line wrapping occurs. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>p {
    white-space: pre-wrap;
}

Copy after login