文本溢出时显示省略标记(...)

1、单行文本溢出

text-overflow : clip | ellipsis

• clip : 当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。
• ellipsis : 当对象内文本溢出时显示省略标记（...）

注意：
使用ellipsis的时候，必须配合
overflow : hidden;
white-space : nowrap;
width : 50%; 这三个样式共同使用才会有效果，示例代码：

nowarp: 不换行

关于产品的推广关于产品的推广关于**产品的推广

上面的width属性根据实际需要填写，其它样式是固定的。

2、多行文本溢出

webkit内核的浏览器，或者移动端，是可以实现多行文本内容超出点点点…最后一行显示的，典型的CSS组合如下：

.box {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 20px;
    height: 60px;
}

其中-webkit-line-clamp就是控制行数的，是3就是显示3行，3行结束点点点，如果是2则最多2行
将height设置为line-height的整数倍，防止超出的文字露出。
文本超过3行时显示... 不超过不显示

参考http://www.zhangxinxu.com/wordpress/2009/09/%E5%85%B3%E4%BA%8E%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E6%BA%A2%E5%87%BA%E7%94%A8%E7%82%B9%E7%82%B9%E7%82%B9-%E7%9C%81%E7%95%A5%E5%8F%B7%E8%A1%A8%E7%A4%BA/