CSS realizes automatic line wrapping to prevent the div from breaking and affecting the layout.

Automatic line wrapping problem. Line wrapping of normal characters is more reasonable, but continuous numbers and English characters often expand the container, which is quite a headache. The following is how to implement line wrapping in CSS

For block-level elements such as p and p
The line wrapping of normal text (Asian text and non-Asian text) elements has the default white-space:normal, and it will automatically wrap after the defined width
html

< id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义< /p >

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 achieve forced line breaking

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

or

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

< id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111< /p >

effect: line breaks can be achieved

2. (Firefox browser) The line breaks of continuous English characters and Arabic numerals. All versions of Firefox do not solve this problem. We can only hide the characters beyond the boundary or add scroll bars to the container

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

< id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111< /p >

effect: the container is normal and the content is hidden

For table

1. (IE browser) use table-layout:fixed; to force the table Width, hide excess content

< style="table-layout:fixed" width="200">
<>
<>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
< /td >
< /tr >
< /table >

effect: hide excess content

2. (IE browser) use table-layout: fixed; to force the width of the table, and the inner td, th uses word- break : break-all; or word-wrap : break-word ;line break

< width="200" style="table-layout:fixed;">
<>
< width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
< /td >
< style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
< /td >
< /tr >
< /table >

effect: line break possible

3. (IE browser) Nest p,p in td,th etc. Use the line break method of p and p mentioned above

4. (Firefox browser) Use table-layout: fixed; to force the width of the table, and the inner layer td, th uses word-break: break-all ; Or word-wrap : break-word ; Line wrap, use overflow:hidden; to hide the excess content, here overflow:auto; will not work

< style="table-layout:fixed" width="200">
<>
< width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890< /td >
< width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890< /td >
< /tr >
< /table >

Effect: Hide more than the content

5. (Firefox browser) Nest p, p, etc. in td, th and use the method mentioned above to deal with Firefox

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use CSS to achieve a mask layer when hovering the mouse

About how to achieve multiple rows and multiple lines with CSS Column layout method

How to use CSS to display ellipsis in the long part of the title text

The above is the detailed content of CSS realizes automatic line wrapping to prevent the div from breaking and affecting the layout.. For more information, please follow other related articles on the PHP Chinese website!