css 实现文本省略号：单行多行

在做移动端的项目时经常会遇到文本过长，块级元素宽度不够，造成折行的问题，产品会要求说根据宽度展示，超出部分用点号代替

做这种效果的时候会遇到单行展示和多行展示

单行示例：

.ellipsis-single{

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

<div>

<p class="ellipsis-single">

在做移动端的项目时经常会遇到文本过长，块级元素宽度不够这行的问题，产品会要求说根据宽度展示，超出部分用点号代替

</p>

</div>

多行展示例如两行，超出部分在第二行末尾展示成点号

.ellipsis-many{

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;//表示展示的行数，可以根据需求改动

overflow:hidden;

}

<div>

<p class="ellipsis-many">

在做移动端的项目时经常会遇到文本过长，块级元素宽度不够这行的问题，产品会要求说根据宽度展示，超出部分用点号代替

</p>

</div>

多行展示只支持webkit内核的浏览器例如chorme 等，另外现在大部分移动端应用都支持webkit，故可以应用

以上方法在低版本的IE浏览器上并不支持，可自行实现。