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

2019独角兽企业重金招聘Python工程师标准>>>

text-overflow ： clip | ellipsis

clip：不显示省略号，而是简单的裁切。

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

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

例：

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

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

转载于:https://my.oschina.net/kangweb/blog/1635433