单行文本
单行文本溢出显示省略号比较简单，主要就三行代码。
p {
width: 300px;
overflow: hidden;
/*文本不会换行*/
white-space: nowrap;
/*当文本溢出包含元素时，以省略号表示超出的文本*/
text-overflow: ellipsis;
}
效果：
多行文本
- 方法一
对于多行文本，一种方法是使用webkit的css扩展属性，该方法适用于Safari、chrome和大多数移动端浏览器。
p {
width: 300px;
overflow: hidden;
/*将对象作为弹性伸缩盒子模型显示*/
display: -webkit-box;
/*设置子元素排列方式*/
-webkit-box-orient: vertical;
/*设置显示的行数，多出的部分会显示为...*/
-webkit-line-clamp: 3;
}
效果：
- 方法二
使用伪元素实现，将伪元素放在最后一个字的上方，达到显示省略号的目的。该方法兼容性较好，但文字未超出的情况下也会出现省略号。
p {
position: relative;
line-height: 1.2em;
max-height: 3.6em;
width: 300px;
/*设置文本为两端对齐*/
text-align: justify;
overflow: hidden;
}
p::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
/*将省略号的大小设置为1个字体大小*/
width: 1em;
/*设置背景，将最后一个字覆盖掉*/
background: #fff;
}
效果：
- 方法三：
使用插件jQuery.dotdotdot，下载及详细文档地址：http://dotdotdot.frebsite.nl/。
p {
width: 300px;
max-height: 3em;
text-align: justify;
overflow: hidden;
}
// js部分代码
$(document).ready(function() {
$("p").dotdotdot();
});
效果：
