CSS-文本内容超出隐藏或显示省略号

1、单行文本超出：

p{
    overflow: hidden;/*超出部分隐藏*/
    text-overflow:ellipsis;/* 超出部分显示省略号 */
    white-space: nowrap;/*规定段落中的文本不进行换行 */
    width: 250px;/*需要配合宽度来使用*/
}

注：

　　text-overflow: clip|ellipsis|string;

　　clip：修剪文本。

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

　　string：使用给定的字符串来代表被修剪的文本。

2、多行文本超出：

p{　
　　display: -webkit-box;
　　-webkit-box-orient: vertical;
　　-webkit-line-clamp: 3;
　　overflow: hidden;
　　width: 250px;
}

注：

1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
4. 因为 -webkit-line-clamp 是一个不规范的属性，它没有出现在 CSS 规范草案中。也就是说只有 webkit 内核的浏览器才支持这个属性，像 Firefox, IE 浏览器统统都不支持这个属性，浏览器兼容性不好。