CSS control text Wrap

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 scenario
IE word-wrap : break-word ;
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
IE word-break:break-all;
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
Firefox/ word-break:break-all; overflow:auto;
abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111
table
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
 
   
 
  

 
 

