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

2021年4月1日17:08:18 发表评论
广告也精彩

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

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
ts小陈

发表评论(请规范评论)--评论需审核

:?: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :cry: :mrgreen: :neutral: :razz:

已登录用户不需要填写以下内容