A deep understanding of the blank characters and line breaks in CSS, css characters and

A deep understanding of the blank characters and line breaks in CSS, css characters and
× Contents [1] white-space [2] word-wrap [3] words before word-break

CSS3 adds two new line feed attributes: word-wrap and word-break. Put a blank character and a line feed together, because in fact, a blank character includes a line feed, and common text does not wrap is the attribute of a blank character white-space: nowrap; however, they still have some attribute values and their corresponding usage. This article will introduce and sort out the blank spaces and line breaks in detail.

 

Blank Space Character

Definition

Blank spaces refer to spaces, tabs, and carriage return characters. HTML combines all blank characters into one space by default.

White-space

Value: normal | nowrap | pre-wrap | pre-line | inherit

Initial Value: normal

Apply to: All elements

Inheritance: Yes

Normal: Merge blank characters, allow automatic newline nowrap: Merge blank characters, do not allow automatic newline pre-line: Merge blank characters (excluding line breaks), allow automatic newline pre: Do not merge blank characters, automatic line feed not allowed pre-wrap: blank characters are not merged, and automatic line feed is allowed

[Note] <pre> the element has a white-space: pre by default;

[Note] IE7-the browser does not support the pre-line and pre-wrap attribute values.

<div>They can stay 72-hours     within the Shandong      province after they have entered China via the Qingdao International Airport.</div>

 

Text line feed

The browser provides the Text wrap function. The text container can wrap automatically on the right.

For English, the browser will automatically wrap the line in a space or a hyphen, instead of a sudden line break in the middle of the word.

For Chinese, you can wrap a line after any text, but when a browser encounters a punctuation mark, it usually wrap the punctuation mark and the previous text as a whole.

In fact, white-space cannot solve the problem of long words or UTL address line breaks.

Word-wrap

The word-wrap attribute is used to automatically wrap long words or URLs.

Value: normal | break-word

Initial Value: normal

Apply to: All elements

Inheritance: Yes

Word-wrap: normal)

[Note] When the white-space value is nowrap or pre, the word-break and word-wrap attributes are invalid.

[Note] word-wrap is changed to overflow-wrap in the standard. However, due to compatibility problems, word-wrap is generally used.

Word-break

CSS3 uses the word-break attribute to determine the processing method of automatic line feed. Through specific attribute settings, the browser can not only implement a half-width space or a line break after a hyphen, but also enable the browser to implement a line break at any position.

Value: normal | break-all | keep-all

Initial Value: normal

Apply to: All elements

Inheritance: Yes

Normal: a line break between Chinese characters and boundary characters. break-all: For long English words, the line feed is truncated. long words occupy the remaining space of the current line. However, for the processing of Chinese characters, different browsers [1] firefox and safari: Chinese character line breaks between Chinese and border, and punctuation can be placed at the beginning of the paragraph [2] IE and chrome: line feed of Chinese characters from Chinese to boundary, but do not allow punctuation to be placed at the beginning of the field keep-all: For long English text, line feed is not allowed, but for Chinese processing, different browsers are inconsistent [1] firefox: line feed in blank space [2] IE and chrome: line feed in blank space and punctuation [3] safari: not supported

[Note] the Mobile End currently does not support the keep-all value.

[Note] When the word-break value is break-all, the word-wrap attribute is invalid; otherwise, both attributes take effect.

 

Table

For the long text of a table cell, you need to set table-layout: fixed to force line feed using word-wrap or word-break.