css设置超过宽度的部分用省略号代替

text-overflow : clip | ellipsis

clip:不显示省略号,而是简单的裁切。

ellipsis:当对象内文本溢出时显示省略号

text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示、设置最小宽度及溢出内容为隐藏,只有这样才能实现溢出文本显示省略号的效果。

例:

/* 超过200像素的时候,多余的代码用省略号代替 */
width:200px;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

注意:如果内部有浮动没有清楚,那么这个效果只是会简单的裁切,而不会有省略号出现

猜你喜欢

转载自my.oschina.net/kangweb/blog/1635433