What is the css line break code?

css line break code: 1. The "word-wrap: break-word;word-break: normal;" statement can realize automatic line wrapping; 2. The "word-break:break-all;" statement can realize forced English words wrap.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Several ways to wrap lines in css

Automatic line wrapping

div{
    word-wrap: break-word;
    word-break: normal;
}

Force English word line breaks

 div{
    word-break:break-all;
 }

Force No line breaks

div{
    white-space:nowrap;
}

Description:

1. white-space attribute

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

This attribute declares how to handle whitespace characters in elements during the layout process.

Syntax:

white-space : normal | pre | nowrap | pre-wrap | pre-line ;

Attribute value:

• normal: Default. White space is ignored by the browser.

• pre: Blanks will be preserved by the browser. It behaves like the

   tag in HTML. </p></li><li><p>nowrap: The text will not wrap. The text will continue on the same line until the <br> tag is encountered. </p></li><li><p>pre-wrap: Preserve whitespace sequences, but wrap lines normally. </p></li><li><p>pre-line: Combine whitespace sequences but retain newlines. </p></li></ul><p>2. word-wrap attribute </p><p>The word-wrap attribute allows long words or URL addresses to be wrapped to the next line. </p><p>Syntax</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">word-wrap: normal|break-word;

  Copy after login

Attribute value:

• normal: Line breaks only at allowed hyphenation points (browser keeps default processing).

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

3. word-breaks attribute

The word-break attribute specifies the processing method of automatic line wrapping.

Syntax

word-break: normal|break-all|keep-all;

Attribute value:

• normal: Use the browser’s default line wrapping rules.

• break-all: Allow line breaks within words.

• keep-all: Only line breaks at half-width spaces or hyphens.

(Learning video sharing: css video tutorial)

The above is the detailed content of What is the css line break code?. For more information, please follow other related articles on the PHP Chinese website!