CSS3技巧33：妙用文本溢出text-overflow

text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (...) 或显示自定义字符串（没什么浏览器支持）。

.xx{
    text-overflow: ellipsis | clip | string;
}

• ellipsis：显示省略符号 ... 来代表被修剪的文本。

• clip：剪切文本。

• string：自定义字符串来代表修剪的文本。不是所有浏览器都支持。

text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (...) 或显示自定义字符串。

需要配合以下两个属性使用：

white-space: nowrap;
overflow: hidden;

常用情景：

1. 单行文本超出范围，出现省略号。

.box{
    width: 150px;
    height: 30px;
    line-height: 30px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

 2. 多行文本超出范围，出现省略号。

这个真的是太赞了。经过测试，Chrome 和 Firefox 均支持这个效果。

.box{
    width: 150px;
    line-height: 30px;

    display: -webkit-box;
    -webkit-line-clamp: 2;   /* 控制行数 */
    -webkit-box-orient: vertical; 
    overflow: hidden;
    text-overflow: ellipsis;
}