Automatic line wrapping problem, line wrapping of normal characters is more reasonable, but continuous numbers and English characters often expand the container, which is quite a headache. The following is how to implement line wrapping in CSS. Best CSS to define line breaks .wrap { table-layout:fixed; word-break: break-all; overflow:hidden; } 1. (IE browser) For continuous English characters and Arabic numerals, use word-wrap: break-word; or word-break:break-all; to achieve forced line breaking #wrap{word-break:break-all; width:200px;} <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> Effect: Line breaks can be achieved 2. (Firefox browser) The line breaks of continuous English characters and Arabic numerals. All versions of Firefox do not solve this problem. We can only hide the characters that exceed the boundary or add scroll bars to the container. <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> Effect: The container is normal and the content is hidden for table <table style="table-layout:fixed" width="200"> Effect: Hide redundant content 2. (IE browser) Use table-layout: fixed; to force the width of the table, and the inner td, th uses word-break: break-all; or word-wrap: break-word; newline <table width="200" style="table-layout:fixed;"> Effect: Line breaks can be made 3. (IE browser) When nesting div, p, etc. in td, th, use the line wrapping method of div and p mentioned above. 4. (Firefox browser) use table-layout: fixed; to force the width of the table, the inner td, th uses word-break: break-all; or word-wrap: break-word; wrap lines, use overflow: hidden; to hide Beyond the content, overflow:auto; cannot work here Effect: Hide more than content 5. (Firefox browser) Nest div, p, etc. in td, th, etc. Use the method mentioned above to deal with Firefox to run the code box. Finally, the chance of this phenomenon occurring is very small, but netizens' pranks cannot be ruled out. The following is the effect of the mentioned example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h1><code>IE word-wrap : break-word ;</code></h1> <h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
Here overflow: hidden; or auto;
================================================== ===============
For block-level elements such as div and p, the line wrapping of normal text (Asian text and non-Asian text) elements has the default white-space: normal, and it will automatically wrap after the defined width.
html
<div id="wrap">Normal text wrapping (Asian and non-Asian text) elements have the default white-space:normal, when defined</div>
css
#wrap{white-space:normal; width:200px; }
or
#wrap{word-wrap:break-word; width:200px;}
#wrap{word-break:break-all; width:200px; overflow:auto;}
1. (IE browser) Use table-layout:fixed; to force the width of the table and hide excess content
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Character line wrapping</title>
<style type="text/css">
table,td,th,div { border:1px green solid;}
code { font-family:"Courier New", Courier, monospace;}
</style>
</head>
<body>
<h1><code>div</code></h1>
<h1><code>All white-space:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap still occurs in a td element that has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, even if the noWrap property is set to true. Therefore, the WIDTH attribute takes precedence over the noWrap property in this scenario</div>
<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>table</code></h1>
<h1><code>table-layout:fixed;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</table>
<h1><code>FF table-layout:fixed; overflow:hidden;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
</body>
</html>