转载 : https://blog.csdn.net/ysynhtt/article/details/44301461
如果你的div设置了固定的width和height,有时会出现文字不能自动换行的情况,
如图
以下是四个浏览器的效果 width:300px;height:300px;
css代码
-
#d1{
-
width:300px;
-
height:300px;
-
padding:0px;
-
margin:0px;
-
border:1px solid;
-
background-color:#aaa;
-
}
查过相关资料后才知道,只有英文文本才会出现不能自动换行的情况,(中文不存在)而原因是因为英文文本之间没有加空格,浏览器会认为这是一个特别长的单词;
解决方法:
1 在文本适当位置加空格,
2 css代码中加上这行:word-wrap:break-word;
修改后的css代码
-
#d1{
-
width:300px;
-
height:300px;
-
padding:0px;
-
margin:0px;
-
border:1px solid;
-
background-color:#aaa;
-
word-wrap:break-word;
-
}
问题解决。
附:
一、对于div强制换行
1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}
2.(Firefox浏览器)white-space:normal; word-break:break-all;overflow:hidden;
同样的FF下也没有很好的实现方法,只能隐藏或者加滚动条,当然不加滚动条效果更好!
#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }
二、对于table强制换行
1. (IE浏览器)使用样式table-layout:fixed;
2.(IE浏览器)使用样式table-layout:fixed与nowrap
3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
4.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div。
-----------------------------------------------------------------------------------------------------------------------------------
三、强制不换行:div{white-space:nowrap;}
四、自动换行:div{ word-wrap: break-word; word-break: normal;}
五、强制英文单词断行:div{word-break:break-all;}