如何用CSS实现多行文本的省略号显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用CSS实现多行文本的省略号显示相关的知识，希望对你有一定的参考价值。
参考技术A overflow:hidden;white-space:nowrap;text-overflow:ellipsis; //隐藏部分带点（….）求采纳，谢谢怎么用css实现多行文本省略？
效果图
多行省略
解决方案
<div class="demo">
CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号
</div>
.demo {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
width: 200px;
border: 1px solid #ccc;
}
1.-webkit-box-orient: vertical：指定子元素按垂直方向排列。
2.-webkit-line-clamp: 3：可以限制块元素中文本的显示行数。这里显示3行。
3.适用范围：该方法适用于Webkit浏览器及移动端。
示例代码下载
可以复制以上代码运行查看使用效果，也可以到GitHub: https://github.com/Jackyyans/code123下载，更多示例将会持续更新，欢迎关注。
以上是关于如何用CSS实现多行文本的省略号显示的主要内容，如果未能解决你的问题，请参考以下文章