css实现单行，多行文本超出文本显示省略号

1:单行文本

div{
    width:100px; /*必须要设置*/
    overflow: hidden;  /*超出部分隐藏*/
    white-space: nowrap;  /*禁止换行，强制文本在一行显示*/
    text-overflow: ellipsis; /*溢出文本显示省略号*/
}

使用text-overflow：ellipsis属性

text-overflow: clip|ellipsis|string;

clip：修剪文本。

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

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

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

div{　
　  width:100px;/*需要限制文本宽度*/
    height:40px;/*需要展示行高度*/
    display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
    -webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
    text-overflow: ellipsis; /* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。（多行文本非必须）*/
    -webkit-line-clamp: 2;/*必须属性，设置展示多少行文本*/
    overflow : hidden;/*溢出属性进行隐藏*/
}

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

注：

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

常见结合属性：

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

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