设置div中文字超出时自动换行

转载 ： https://blog.csdn.net/ysynhtt/article/details/44301461

如果你的div设置了固定的width和height，有时会出现文字不能自动换行的情况，

如图 

以下是四个浏览器的效果  width:300px;height:300px;

css代码

1. #d1{

2. width:300px;

3. height:300px;

4. padding:0px;

5. margin:0px;

6. border:1px solid;

7. background-color:#aaa;

8. }

 

查过相关资料后才知道，只有英文文本才会出现不能自动换行的情况，（中文不存在）而原因是因为英文文本之间没有加空格，浏览器会认为这是一个特别长的单词；

解决方法：

1 在文本适当位置加空格，

2 css代码中加上这行：word-wrap:break-word;

 

修改后的css代码

1. #d1{

2. width:300px;

3. height:300px;

4. padding:0px;

5. margin:0px;

6. border:1px solid;

7. background-color:#aaa;

8. word-wrap:break-word;

9. }

问题解决。

附：

一、对于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;}