css之自动换行

最新推荐文章于 2021-12-29 13:16:51 发布

转载最新推荐文章于 2021-12-29 13:16:51 发布 · 90 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shjy5/p/3825621.html

本文介绍了如何使用CSS属性实现不同浏览器下（如IE和Firefox）的文本自动换行，特别是针对连续的英文字符和阿拉伯数字的处理方法。包括使用word-wrap、word-break等属性来实现文本换行，以及在Firefox中通过设置overflow属性来处理溢出内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
css
#wrap{white-space:normal; width:200px; }

1.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

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

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

效果：可以实现换行

2.（Firefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

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

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

效果：容器正常，内容隐藏

转载于:https://www.cnblogs.com/shjy5/p/3825621.html