一、单行 溢出隐藏 添加省略号
p{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
二、多行 溢出隐藏 省略号
p{
display: -webkit-box;
-webkit-box-orient: vertical;
/*设置省略号在容器第四行文本后*/
-webkit-line-clamp: 4;
overflow: hidden;
}
局限性：
使用webkit的css扩展属性（webkit是私有属性）-webkit-line-clamp
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。限定了在第几行后面增加省略号。超出必须隐藏。
将height设置为line-height的整数倍，防止超出的文字露出。
三、使用插件
Clamp.js项目地址：https://github.com/josephschmitt/Clamp.js
//引入
<script src="js/clamp.min.js"></script>
var module = document.getElementById("clamp-this-module");
//单行省略
$clamp(module ,{clamp:1})
//多行省略
$clamp(module, {clamp: 3});
//根据有效的高度自动省略
$clamp(module ,{clamp:'auto'})
//基于固定元素高度的省略
$clamp(module ,{clamp:'35px'})
注意：文本需要使用p标签或div标签，span不行。
参考代码
// 文本多行省略，兼容IE等浏览器
<body>
<div class="container">
<div id="content">
如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过UnionID来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的unionid是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的。用户的UnionID可通过调用“获取用户信息”接口获取。
</div>
</div>
<script src="./js/clamp.min.js"></script>
<script>
var module = document.getElementById("content");
$clamp(module,{clamp:2})
</script>
</body>
原文地址
