DIV,Table固定宽度,防止数字和字母将容器撑大

最新推荐文章于 2022-06-16 00:00:29 发布

dpc012530891

最新推荐文章于 2022-06-16 00:00:29 发布

阅读量367

点赞数

本文链接：https://blog.csdn.net/dpc012530891/article/details/26705647

版权

本文介绍了CSS中如何处理数字和字母连续导致的容器宽度被撑大的问题。通过设置`word-wrap: break-word`或`word-break: break-all`，可以实现块级元素如div、p的换行。对于IE浏览器，两者皆可；而对于Firefox，可能需要结合`overflow`属性来隐藏超出的内容。在表格中，可通过`table-layout: fixed`配合`word-break`属性达到相同效果。

摘要由CSDN通过智能技术生成

本文固定链接：http://www.verydemo.com/demo_c104_i34449.html

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法

对于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>
效果