Introduction to CSS3 non-line wrapping technology and application examples

CSS3 non-wrapping refers to setting a style in the text content so that it will not automatically wrap when it encounters the end of the line, but will continue to extend to the next line. This technique is often used to design single lines of text or code areas, etc., to make the page look neater and clearer.

In CSS3, there are two commonly used methods to achieve line wrapping: white-space and word-wrap. Next we will introduce each one and give application examples.

1. white-space

The white-space attribute defines how to handle the white space in the element.

This attribute has the following optional values:

1. normal: Default. Ignore extra whitespace.
2. nowrap: The text does not wrap.
3. pre: Preserve all spaces and newlines.
4. pre-wrap: Keep all spaces and newlines, but wrap them.
5. pre-line: Ignore extra whitespace, but retain newlines.

Application example:

<style>
    .nowrap {
        white-space: nowrap; /*文本不换行*/
    }
    .pre {
        white-space: pre; /*保留所有空格与换行符*/
    }
</style>
<div>这是一段不会换行的文本</div>
<div>这是一段<pre class="brush:php;toolbar:false"> 会 保 留 所 有 空 格 
和 换 行 符