Automatic line-wrapping problem, normal character line is more reasonable, and continuous digital and English characters are often the container brace big, it is a headache, the following is how CSS to achieve change
Method of the line
For block-level elements such as Div,p
Line wrapping for normal text (Asian and non-Asian text) elements have default white-space:normal, and wrap after defined width
Html
line breaks for normal text (Asian and non-Asian text) elements have the default white-space:normal when defined
Css
#wrap {white-space:normal; width:200px;}
1. (IE) consecutive English characters and Arabic numerals, using Word-wrap:break-word; or word-break:break-all; implement force break
#wrap {word-break:break-all; width:200px;}
Or
#wrap {word-wrap:break-word; width:200px;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
Effect: line wrapping can be implemented
2. (Firefox browser) consecutive English characters and Arabic numerals of the break, all versions of Firefox did not solve this problem,
We only have to hide the characters beyond the bounds or add scrollbars to the container.
#wrap
{word-break:break-all; width:200px; overflow:auto;}
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
Effect: Container normal, content hidden
For table
1. (IE) use table-layout:fixed; Force table width, excess content hidden
Abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
|
Effect: Hide Excess content
2. (IE) use table-layout:fixed; force the width of the table,
The inner layer td,th adopts word-break:break-all; or word-wrap:break-word; line breaks
ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890 |
ABCDEFGHIGKLMNOPQRSTUVWXYZ 1234567890 |
Effect: can be changed line
3. (IE) nested div,p in td,th, etc. using the div,p of the above mentioned line-wrapping method
4. (Firefox browser) use table-layout:fixed; Force table width, inner layer td,th
To use Word-break:break-all or Word-wrap:break-word;
Use Overflow:hidden; hide beyond content, here Overflow:auto; not working
abcdefghigklmnopqrstuvwxyz1234567890 |
abcdefghigklmnopqrstuvwxyz1234567890 |
Effect: Hide more than content
5. (Firefox browser) in td,th nested div,p, etc. using the above mentioned method of dealing with Firefox
Run the Code box 100 footage Mesh
Finally, the probability of this phenomenon is very small, but can not rule out the user's spoof. If
If you have any questions, please leave a message below.
The following is the effect of the examples mentioned
<title>Character Line Wrapping</title>div
All white-space:normal;
WordWrap still occurs in a TD element the have its WIDTH attribute set to a value smaller than the unwrapped content of th E cell, even if the NoWrap property was set to true. Therefore, the WIDTH attribute takes precedence over the NoWrap property in this scenarioIE word-wrap : break-word ;
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111IE word-break:break-all;
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111Firefox/ word-break:break-all; overflow:auto;
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111table
table-layout:fixed;
Abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss |
table-layout:fixed; word-break : break-all; word-wrap : break-word ;
Abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss |
Abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss |
FF table-layout:fixed; overflow:hidden;
abcdefghigklmnopqrstuvwxyz1234567890 |
abcdefghigklmnopqrstuvwxyz1234567890 |