Text overflow text-overflow, overflow text-overflow

Text overflow text-overflow, overflow text-overflow

In practical applications, we often encounter the situation of intercepting strings when wrapping and text overflow in this article. Before understanding the text overflow attribute, we must first understand the attributes of text wrapping and blank spaces, then you can learn the text overflow text-overflow attribute.

• White-space attribute: used to process spaces.

Possible attribute values include:

(2) pre: When the pre attribute value is used, the blank and line feed will be retained, and the line feed will not be broken when the value exceeds the container edge. Similar to the <pre> label in HTML.

 

(1) normal: the default attribute value. Excessive Blank spaces are ignored by the browser and only one space is retained.

 

(3) nowrap: forces all texts to be displayed in the same line, and merges unnecessary spaces between texts until a line break tag is encountered. <br/>.

 

(4) pre-line: the blank sequence is merged, but the line break is retained. This attribute is not supported by browsers earlier than IE8.

 

(5) pre-wrap: Reserved blank character sequence, but line feed is normal. This attribute is not supported by browsers earlier than IE8.

 

(6) inherit: specifies that the value of the white-space attribute should be inherited from the parent element. This attribute value is not supported in all IE versions.

• Text wrap word-wrap attributes:

In a div, we usually expect that the text will automatically wrap when it exceeds the div width. If it is a Chinese character, everything goes smoothly, however, consecutive English characters or numbers are beyond the container's boundary. However, the word-wrap attribute can implement its line feed function.

Possible attribute values:

(1) normal: The default value is used to keep the browser's default processing. Only line breaks are allowed, so that non-consecutive English characters and numbers or Chinese characters can be used for line breaks.

(2) break-word: This attribute value can be used to wrap the content, that is, it can wrap the content within the boundary and cannot exceed the boundary. It does not truncate words for line breaks, and should keep word integrity as much as possible. By default, table does not support word-wrap: break-word. Special processing is required.

• Text overflow text-overflow attributes

(1) clip: This attribute value indicates direct cropping and does not display the omitted mark (...).

(2) ellipsis: This attribute can be set to display the omitted mark (...) when the text overflows (...).

• The typical code for text overflow is:

White-space: nowrap; (Force text to be displayed on one line) overflow: hidden; (Force text to be displayed on one line) text-overflow: ellipsis;

• When long English text exists, the prerequisite for the text-overflow attribute to take effect is overflow (or overflow-y or overflow-x): hidden | auto | scroll.
• When the text is a Chinese character, the prerequisite for the text-overflow attribute to take effect is that the word-break: keep-all; or white-space: nowrap can be used if the text is not automatically wrapped; overflow (or overflow-y or overflow-x): hidden | auto | scroll

• Automatically wrap word-break attributes:

The usage of this attribute is similar to that of the word-wrap attribute. Its specific attribute settings allow the browser to implement line breaks at any position.

Normal: line breaks between Chinese characters and the boundary.

Keep-all: For long English text, line breaks are not allowed, but different browsers are used to process Chinese characters. (Line feed in blank spaces and punctuation points)

 

Break-all: For long English words, the line feed is truncated, and long words occupy the remaining space of the current line. However, the processing of Chinese characters varies with different browsers, which indicates the performance in chrome. (Line breaks of Chinese characters from Chinese to boundary, But punctuation cannot be placed at the beginning of a field)