首先看一下css单行文本超出部分显示省略号[…]实现代码:
overflow: hidden;//规定当内容溢出元素框时修剪。
text-overflow:ellipsis;//显示省略符号来代表被修剪的文本。
white-space: nowrap;//规定段落中的文本不进行换行;
对于多行文字, 上面的代码就不适用了。这时候我们就要用到WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
多行超出部分显示省略号[…]实现代码:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
我们只需要改变-webkit-line-clamp的值就能实现在第n行用省略号[…]表示了。
【知识点】
- -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
- display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient; 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
完整的实例展示
实例代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多行文本实现超出...</title>
<style type="text/css">
.text {
text-overflow: ellipsis;
font-size: 14px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-top: 10px;
line-height: 20px;
max-height: 40px;
overflow: hidden;
}
</style>
</head>
<body>
<span class="text">酷我音乐车机版v5.0.0.3破解版 免登陆下VIP音乐多行文本实现超出...多行文本实现超出...</span>
</body>
</html>
实例效果图:

以上就是《css文本显示两行,多余的用省略号[…]表示》的全部内容,你学会了吗?
猜你喜欢