CSS——div换行

来源于网络

解决方法:

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;}

发布于 2022-09-04 18:24