Detailed explanation of how CSS implements automatic line wrapping of English and continuous numbers

For block-level elements such as p and p

Normal text line wrapping (Asian text and non-Asian text) elements have the default white-space:normal, after the defined width Automatic line wrapping:

　html<p 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;}
　　<p id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</p>

Effect: Line breaks can be achieved

2. (Firefox browser) Line breaks for consecutive English characters and Arabic numerals. All versions of Firefox have not solved this problem. We Only hide the characters beyond the boundary or add scroll bars to the container

#wrap{word-break:break-all; width:200px; overflow:auto;}
　　<p 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 width of the table and hide excess content

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

Effect: Hide excess content

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

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

Effect: OK Line break

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

　4.(Firefox browser) use table-layout: fixed; to force the width of the table, the inner td, th uses word-break: break-all; or word-wrap: break-word; to wrap the line, use overflow:hidden; to hide the excess content, here overflow:auto; Unable to work

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

Effect: Hide more than the content

5. (Firefox browser) Use p, p, etc. to nest in td, th The method mentioned above to deal with Firefox is to run the code box. Finally, the probability of this phenomenon happening is very small.

The above is the detailed content of Detailed explanation of how CSS implements automatic line wrapping of English and continuous numbers. For more information, please follow other related articles on the PHP Chinese website!