How to wrap css

In CSS, the word-break and white-space attributes are used to set automatic line wrapping. The word-wrap attribute allows long words or URL addresses to wrap to the next line; and the white-space attribute can set text. Line break mode.

The operating environment of this article: windows7 system, css3 version, Dell G3 computer.

How to wrap lines in css?

css makes the container unable to fit in automatic line wrapping

css can set automatic line wrapping through the two properties of word-break and white-space. The word-wrap attribute allows long words or URL addresses to be wrapped to the next line. The white-space attribute can set the text wrapping method.

css makes the container unable to fit and wrap automatically:

css code:

<style type="text/css">
.linebr {
clear: both; /* 清除左右浮动 */
width: 100px; /* 必须定义宽度 */
border:1px solid ;/*定义容器外边框*/
word-break: break-word; /* 文本行的任意字内断开 */
word-wrap: break-word; /* IE */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
}
</style>

HTML code:

CSS The content of the container exceeds (overflow) automatic line wrapping, the CSS container content exceeds (overflow) automatic line wrapping, the CSS container content exceeds (overflow) automatic line wrapping

Rendering:

word-break attribute:

The word-wrap attribute allows long words or URL addresses to be wrapped to the next line.

Syntax:

word-wrap: normal|break-word;

Attribute value:

normal Only line breaks at allowed hyphenation points (browsers keep default processing).

break-word Break lines inside long words or URL addresses.

white-space attribute

The white-space attribute sets how to handle white space within the element.

Attribute value:

normal Default. White space is ignored by the browser.

pre White space will be preserved by the browser. It behaves like the

 tag in HTML. <p>nowrap The text will not wrap. The text will continue on the same line until the <br> tag is encountered. </p><p>pre-wrap Preserves whitespace sequences, but wraps normally. </p><p>pre-line merges whitespace sequences but retains newlines. </p><p>inherit specifies that the value of the white-space attribute should be inherited from the parent element. </p><p>Recommended learning: "<a href="https://www.php.cn/course/list/12.html" target="_blank">css video tutorial</a>"</p>

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