白露博客
首先看一下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文本显示两行，多余的用省略号[…]表示》的全部内容，你学会了吗？
利用css实现小三角形教程
深入理解伪类和伪元素！
HTTP状态码和Request的Header信息笔记小结
织梦更改文档标题最大长度，解除限制的方法！
修改织梦dedecms文章描述自动摘要长度，解除字数限制的方法！
猜你喜欢