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. <pre class='brush:php;toolbar:false;'>p {
    white-space: pre;
}

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. <pre class='brush:php;toolbar:false;'>p {
    white-space: pre-wrap;
}

The spaces at the beginning of the text, internal spaces and newlines are all retained, and line breaks occur beyond the container.

5. white-space: pre-line

When the white-space attribute is pre-line, it means to retain the newline character. Except for the newline character, which will be output as it is, everything else is consistent with the white-space:normal rule.

p {
    white-space: pre-line;
}

Except that the line breaks inside the text are not converted into spaces, the other processing rules are consistent with normal. This is useful for poetry type texts.

For more programming related content, please pay attention to the Programming Introduction column on the php Chinese website!

The above is the detailed content of How to handle spaces in css. For more information, please follow other related articles on the PHP Chinese website!