单行文本，多行文本，长度超出省略号显示

1、单行文本

p{
/* 文本溢出显示省略号 */
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; 
}

overflow:hidden; white-space:nowrap; width:XXX值;text-overflow:clip/ellipsis;必须要四个属性同时配合使用，才有效果。且支持响应式。

text-overflow:clip/ellipsis;

当值为clip,表示超出部分截断，无省略号；值为ellipsis,截断且显示省略号

2、多行文本

.multi-rows {
    overflow: hidden;
    text-overflow: ellipsis; /**显示省略号 **/
    display: -webkit-box;  /**将对象作为弹性伸缩盒子模型显示 **/
    -webkit-line-clamp: 3; /**显示行数 **/
    -webkit-box-orient: vertical; /**设置或检索伸缩盒对象的子元素的排列方式 **/
}

必须overflow:hidden、display:-webkit-box、-webkit-line-clamp:N、-webkit-box-orient:值这四个属性同时使用，才能有效果，省略号可选可不选。支持响应式。尤其适用移动端。

缺点：不支持ie/firefox