css control text automatic wrapping-CSS Tutorial-php.cn

css control text automatic wrapping

高洛峰

Release： 2016-10-12 10:33:42

Original

1413 people have browsed it

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

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>

Copy after login