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 class="nowrap">这是一段不会换行的文本</div>
<div class="pre">这是一段<pre class="brush:php;toolbar:false"> 会 保 留 所 有 空 格 
和 换 行 符 

Copy after login

2. word-wrap

The word-wrap attribute is used to specify whether an over-long word can be wrapped when wrapping. Truncate on the second line. In practical applications, when setting a narrower container width, if we do not want words to be cut but want to be able to wrap lines, we should set this attribute.

This attribute has the following optional values:

1. normal: Default. Line breaks only at allowed hyphenation points (browser reserved).
2. break-word: Line break inside long words or url addresses.

Application examples:

<style>
    .break-word{
        word-wrap:break-word;
    }
</style>
<div style="width:100px;border:1px solid #000;">
    <p class="break-word">这是一个很长很长很长的单词：aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>

The above is the introduction and application examples of CSS3 non-line wrapping technology. Through reasonable use of non-line-breaking technology, the page can be made more flexible and the scalability of the design can be increased.

The above is the detailed content of Introduction to CSS3 non-line wrapping technology and application examples. For more information, please follow other related articles on the PHP Chinese website!