Analysis on automatic line feed of Div and table exceeding the width in CSS webpage Layout

Automatic line feed is a reasonable line feed for normal characters. Continuous numbers and English characters often increase the container size, which is a headache. Article Now, let's summarize how CSS implements line feed. As long as the following sentence is defined in CSS, the web page will not be supported.

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

Example source code [Www.52css.com] Html
<Div id = "Wrap"> normal Text wrap (Asian text and non-Asian text) elements have the default white-space: normal, when defined </div>
CSS
# Wrap {white-space: normal; width: 200px ;}

IE browser
Use Word-wrap: Break-word; or word-break: Break-all; to forcibly disconnect a row.

Example source code [Www.52css.com] Html
<Div id = "Wrap"> 52csscom52csscom52csscom52csscom52csscom52csscom </div>
CSS
# Wrap {word-break: Break-all; width: 200px ;}

Or

Example source code [Www.52css.com] # Wrap {word-wrap: Break-word; width: 200px ;}

Firefox
Continuous disconnection of English characters and Arabic numbers. None of Firefox versions solve this problem. In this case, we only need to hide the characters that exceed the boundary or add a scroll bar to the container.

Example source code [Www.52css.com] Html
<Div id = "Wrap"> 52csscom52csscom52csscom52csscom52csscom52csscom </div>
CSS
# Wrap {word-break: Break-all; width: 200px; overflow: auto ;}

For Table Elements

IE browser

1. Use table-layout: fixed; to force the table width and hide unnecessary content.

Example source code [Www.52css.com] <Table Style = "table-layout: fixed" width = "200"> <tr> <TD> 52csscom52csscom52csscom52csscom52csscom52csscom </TD> </tr> </table>

2. Use table-layout: fixed; to force the width of the table, use Word-break: Break-all in the TD and th layers, or use Word-wrap: Break-word.

Example source code [Www.52css.com] <Table width = "200" style = "table-layout: fixed;"> <tr> <TD width = "25%" style = "word-break: Break-all; "> keys </TD> <TD style =" word-wrap: Break-word; "> 52csscom52csscom52csscom52csscom52csscom52csscom </TD> </tr> </table>

3. nested Div and P in TD and th adopt the wrap method of Div and P mentioned above

Firefox

1. Use table-layout: fixed to force the width of the table, and use Word-break: Break-all; or word-wrap: Break-word to wrap the line, use overflow: hidden; hide the content beyond the upper limit. Here overflow: auto; cannot work.

Example source code [Www.52css.com] <Table Style = "table-layout: fixed" width = "200"> <tr>
<TD width = "25%" style = "word-break: Break-all; overflow: hidden;"> 52csscom52csscom52csscom52csscom52csscom52csscom </TD>
<TD width = "75%" style = "word-wrap: Break-word; overflow: hidden;"> 52csscom52csscom52csscom52csscom52csscom52csscom </TD>
</Tr> </table>

2. nesting Div and P in TD and th adopts the methods mentioned above to deal with Firefox.
Best CSS definition line feedCode 

Example source code [Www.52css.com] . Wrap {table-layout: fixed; Word-break: Break-all; overflow: hidden ;}