css多行超出显示点_css怎么设置超出几行显示省略号？

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。下面我们来看一下css如何设置文本超出几行显示省略号。

css设置超出几行显示省略号：

1、单行文本

使用text-overflow：ellipsis属性

text-overflow: clip|ellipsis|string;

clip：修剪文本。

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

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

示例：

css:

p{

overflow: hidden;/*超出部分隐藏*/

text-overflow:ellipsis;/* 超出部分显示省略号 */

white-space: nowrap;/*规定段落中的文本不进行换行 */

width: 250px;/*需要配合宽度来使用*/

border: 1px solid red;

font-size: 30px;

}

html:

单行文本超出部分显示省略号我是mdzz

2、多行文本显示省略号，省略号在段尾

p{

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

width: 250px;

border: 1px solid red;

font-size: 30px;

}

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。

常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

从最零基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项目实战【视频＋工具＋系统路线图】都有整理，在线解析，学习指导，点：【WEB前端学习圈⑤】