一、单行 溢出隐藏 添加省略号
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>
原文地址
