Home > Article > Web Front-end > css control text automatic wrapping
css control text automatic wrapping
- 高洛峰Original
- 2016-10-12 10:33:421358browse
Automatic line wrapping problem. Line wrapping of normal characters is more reasonable, but continuous numbers and English characters often stretch the container, which is quite troublesome. Here is how CSS implements line wrapping
For divs, Block-level elements such as p
Line wrapping of normal text (Asian text and non-Asian text) elements have the default white-space:normal, and they will automatically wrap after the defined width
html
Line wrapping of normal text (Asian text and non-Asian text) 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 numerals, use word-wrap : break-word; or word-break:break-all; to implement forced line breaking
#wrap{word-break:break-all; width:200px;}
or
#wrap{word-wrap:break- word; width:200px;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
Effect: line breaks can be achieved
2. (Firefox browser) continuous English characters and Arabic numerals line breaks, all versions of Firefox have not solved this problem,
we only have to let Hide characters that exceed the boundary or add scroll bars to the container
#wrap
{word-break:break-all; width:200px; overflow:auto;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
Effect: The container is normal and the content is hidden
For table
1. (IE browser) use table-layout:fixed; to force the width of the table and hide excess content
| abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss |
Effect: Hide redundant content
2. (IE browser) use table-layout: fixed; to force the width of the table,
inner layer td, th uses word-break: break-all; or word-wrap: break-word; line break
| abcdefghigklmnopqrstuvwxyz 1234567890 | abcdefghigklmnopqrstuvwxyz 1234567890 |
Effect: line wrap
3 . (IE browser) Nesting div, p, etc. in td, th uses the line wrapping method of div and p mentioned above.
4. (Firefox browser) Use table-layout: fixed; to force the width of the table, inner td, th selection
Use word-break: break-all; or word-wrap: break-word; line break,
use overflow:hidden;Hide beyond content, here overflow:auto;cannot work
| abcdefghigklmnopqrstuvwxyz1234567890 |
Effect: Hide more than content
5.(Firefox browser ) Nest div, p, etc. in td, th and use the method mentioned above to deal with Firefox
Run the code box 100 material network
Finally, the chance of this phenomenon occurring is very small, but netizens’ pranks cannot be ruled out. If
you have any questions please leave a message below
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>字符换行
</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>
<h1><code>IE word-wrap : break-word ;</code></h1>
<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>
<h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijkl
mn111111111</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>