CSS automatic line wrapping_CSS/HTML

Everyone knows that continuous English or numbers can make the container expand and cannot automatically wrap according to the size of the container. Here is how to wrap them with CSS!
For div
1. (IE browser) white-space:normal; word-break:break-all; The former here follows the standard.

#wrap{white-space:normal; width:200px; }
or
#wrap{word-break:break-all;width:200px;}

ddd11111111111111111111111111111111111

Effect: Line break can be achieved

2. (Firefox browser) white-space:normal; word-break:break-all;overflow:hidden;Same There is no good implementation method in FF. You can only hide or add scroll bars. Of course, it is better not to add scroll bars!

#wrap{white-space:normal; width:200px; overflow:auto;}
or
#wrap{word-break:break-all;width:200px; overflow:auto; }

DDD111111111111111111111111111111111111111111

Effect: The container is normal, the content is hidden

for Table

1. (IE browser) use style. table-layout:fixed;

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890




Effect: Line breaks are possible
2. (IE browser) Use styles table-layout:fixed and nowrap

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

Effect: can wrap

3. (IE browser) Use the style table-layout:fixed and nowrap


.tb{table-layout:fixed}

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890
Effect: Both tds wrap normally 4. (Firefox browser) Use the style table-layout: fixed and nowrap when using percentage to fix the td size, and use div

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

The cell width here must be defined as a percentageEffect: normal Display, but cannot wrap (Note: There is no good way to wrap the content of the container under FF. You can only use overflow to hide the extra content to avoid affecting the overall effect)