禁止换行与强制换行

本文介绍了使用CSS处理文本溢出的多种方法,包括如何通过white-space、text-overflow、word-wrap等属性来实现文本的换行或截断显示,并讨论了不同浏览器下的兼容性问题。

一、禁止换行

white-space:nowrap;
overflow:hidden;

当文字内容过长,想以省略号表示可使用text-overflow:ellipsis,此法在FF下无效,但在FF下可以调宽度+ 伪类的方法即:

p:after{content:"...";}

这个方法有个弊端,当内容很少的情况下也会出现这个省略号,怎么解决呢???

 

二、强制换行

 

word-wrap:break-word;/*不断开英文单词*/
overflow:hidden;

 

word-break:break-all;/*断开英文单词*/
overflow:hidden;

 

FF下不支持word-break:break-all目前还没有找到更好的办法,只能让其隐藏overflow:hidden;或出现滚动条overflow:auto;

 

所以一般写成word-break:break-all;overflow:hidden;

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值