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 e03b848252eb9375d56be284e690e873 tag in HTML.

• nowrap: The text will not wrap. The text will continue on the same line until the 0c6dc11e160d3b678d68754cc175188a tag is encountered.

• pre-wrap: Preserve whitespace sequences, but wrap lines normally.

• pre-line: Combine whitespace sequences but retain newlines.

2. word-wrap 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: 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!