Automatically wrap when the text in the DIV exceeds the limit

In development, it is easy to encounter the problem of text exceeding in Div. Here we summarize the following methods:

White-spaceAttribute setting: how to process the blank space in the element. This attribute declares how to process the blank characters in the element during layout creation. All browsers support the white-space attribute.

Note: any version of Internet Explorer (including IE8) does not support the attribute value "inherit ".

Value	Description
Normal	Default value. The blank space is ignored by the browser.
Pre	The blank space is retained by the browser. The behavior is similar to the <PRE> label in HTML.
Nowrap	The text will not wrap, and the text will continue on the same line until the <br> label is encountered.
Pre-wrap	The blank character sequence is retained, but the line feed is normal.
Pre-line	Merges the blank character sequence, but retains the line break.
Inherit	Specifies that the value of the white-space attribute should be inherited from the parent element.

Word-breakAttribute specifies the handling method of automatic line feed. This attribute enables the browser to wrap a line at any position. Syntax: Word-break: normal | break-All | keep-all;

Value	Description
Normal	Use the default line feed rule of the browser.
Break-all	Line breaks are allowed in words.
Keep-all	You can only wrap a line at a halfwidth space or a hyphen.

 

Force line feed for div

1. (IE browser) white-space: normal; Word-break: Break-all; the former follows the standard.

# Wrap {white-space: normal; width: 200px;} Or # wrap {word-break: Break-all; width: 200px ;}

2. (Firefox) white-space: normal; Word-break: Break-all; overflow: hidden;

There is no good implementation method for the same ff. You can only hide or add a scroll bar. Of course, the effect is better without a scroll bar!

# Wrap {white-space: normal; width: 200px; overflow: auto;} Or # wrap {word-break: Break-all; width: 200px; overflow: auto ;}

Force line feed for table

Table-LayoutAttribute is used to display algorithm rules for table cells, rows, and columns.

1. (IE browser) use the style table-layout: fixed;

2. (IE browser) use the style table-layout: fixed and nowrap

3. (IE browser) use the style table-layout: fixed and nowrap when the percentage is fixed to the TD size.

4. (Firefox browser) use the style table-layout: fixed and nowrap when the percentage is fixed to the TD size, and use Div.

Force do not wrap: div {white-space: nowrap ;}

Automatic line feed: div {word-wrap: Break-word; Word-break: normal ;}

Force an English word to break the line: div {word-break: Break-all ;}