H5+Css3文本溢出添加省略号（包括插件）-Toy模板网

这篇具有很好参考价值的文章主要介绍了H5+Css3文本溢出添加省略号（包括插件）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、单行溢出隐藏添加省略号

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>