CSS Firefox and IE line feed solution

1
/* Disable line breaks */
. Nowrap {word-break: keep-all; white-space: nowrap ;}
/* Force line feed */
. Break {word-break: break-all ;}

Css force do not wrap
Div {white-space: nowrap ;}

Css wrap

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

Css forces an English word to break a line

Div {word-break: break-all ;}

We all know that continuous English or numbers will break the DIV or table border and cannot automatically wrap lines based on the container size. below is how CSS wrap them!

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 ;}

Eg.

Ddd1111111111111111111111111111111111111111111111111111111111111111111

 

Effect: line breaks can be implemented.

2. (Firefox) white-space: normal; word-break: break-all; overflow: hidden; the same FF does not have a good implementation method. You can only hide or add a scroll bar, of course, it is better to not add a scroll bar!

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

Eg.

Ddd1111111111111111111111111111111111111111111111111111111111111111111

Effect: the container is normal and the content is hidden.

For table

1. (IE browser) use styles;
Eg.

Abcdefghigklmnopqrstuvwxyz 1234567890

 

Effect: line breaks are supported.

2. (IE browser) Use style and nowrap
Eg.

Abcdefghigklmnopqrstuvwxyz 1234567890

 

Effect: line breaks are supported.

3. (IE browser) Use style and nowrap when the percentage is fixed to the td size

 

Abcdefghigklmnopqrstuvwxyz 1234567890

Abcdefghigklmnopqrstuvwxyz 1234567890

 

Effect: The line feed is normal for both td devices.

3. (Firefox) Use style and nowrap when the percentage is fixed to the td size, and use div
Eg.

Abcdefghigklmnopqrstuvwxyz 1234567890

Abcdefghigklmnopqrstuvwxyz 1234567890

 

The cell width must be defined in percentage.

For div, p, and other block-level elements
The normal text line feed (Asian text and non-Asian text) element has the default white-space: normal, automatically wrap after the defined width
Html

The normal text line feed (Asian text and non-Asian text) element has the default white-space: normal, when defined

Css
# Wrap {white-space: normal; width: 200px ;}

1. (IE browser) for continuous English characters and Arabic numbers, use word-wrap: break-word; or word-break: break-all; to implement forced Line Disconnection

# Wrap {word-break: break-all; width: 200px ;}
Or
# Wrap {word-wrap: break-word; width: 200px ;}

Abcdefghijklmnabcdefghijklmnabcdefghijklmn1111111

Effect: line breaks can be implemented.

2. (Firefox) continuous disconnection of English characters and Arabic numbers. All Firefox versions do not solve this problem. We only need to hide the characters that exceed the boundary or add a scroll bar to the container.

# Wrap {word-break: break-all; width: 200px; overflow: auto ;}

Abcdefghijklmnabcdefghijklmnabcdefghijklmn1111111

Effect: the container is normal and the content is hidden.

For table

1. (IE browser); force the width of the table to hide unnecessary content

Abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss

Effect: Hide unnecessary content

2. (IE browser) use; force the width of the table, the inner td, th use word-break: break-all; or word-wrap: break-word; line feed

Abcdefghigklmnopqrstuvwxyz 1234567890

Abcdefghigklmnopqrstuvwxyz 1234567890

Effect: line breaks are supported.

3. (IE browser) Embedding div and p in td and th adopts the wrap method of div and p mentioned above.

4. (Firefox browser) use; force the width of the table, the inner TD, th use Word-break: Break-all; or word-wrap: Break-word; line feed, use overflow: hidden; overflow: auto; does not work.