CSS implements automatic line wrapping

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 using 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;}

<div >ddd1111111111111111111111111111111111</div>

Effect: Line breaks can be achieved

2. (Firefox browser) white-space:normal; word-break:break-all;overflow:hidden; There is also no good implementation method in FF. You can only hide or add scroll bars, but of course no scroll bars. The effect is better!

#wrap{white-space:normal; width:200px; overflow:auto;}

or

#wrap{word-break:break-all;width:200px; overflow:auto; }

<div >ddd1111111111111111111111111111111111111111</div>

Effect: The container is normal and the content is hidden

for table

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

Effect: Line breaks can be made

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

Effect: Line breaks can be made

3. (IE browser) Use the style table-layout: fixed and nowrap when using a percentage to fix the td size.

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

The cell width here must be defined as a percentage

Effect: Normal display, but no line wrapping (Note: There is no good way to wrap the container content under FF. You can only use overflow to hide the extra content to avoid affecting the overall effect)