首页 > 代码库 > css3之文本text-overflow 与 word-wrap, word-break
css3之文本text-overflow 与 word-wrap, word-break
CSS3 Text Overflow属性
CSS3文本溢出属性指定应向用户如何显示溢出内容
语法:
text-overflow:clip | ellipsis
但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下:
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
效果:
CSS3的换行
如果某个单词太长,不适合在一个区域内,它扩展到外面:
CSS3中,自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字:
语法:
word-wrap:break-word;
CSS3 单词拆分换行
CSS3 单词拆分换行属性指定换行规则:
CSS代码如下:
p.test1 { width:9em; border:1px solid #000000; word-break:keep-all; } p.test2 { width:9em; border:1px solid #000000; word-break:break-all; }
引:http://www.runoob.com/css3/css3-text-effects.html
css3之文本text-overflow 与 word-wrap, word-break
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。