CSS实现div内显示一行，二行或三行超出部份省略号显示
墨初 Web前端 1491阅读
在前端web页面中有时候需要隐藏内容的部份，并且以省略号的形式显示。下面就是CSS样式中关于内容超出部份用省略号表示的方法，并且可以规定超过的文字行数。
CSS实现超过部份隐藏并显示省略号的方法
1、CSS规定只显示一行，超出后以省略号表示
CSS代码：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
2、CSS显示两行或三行，超过以省略号表示
.div {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3; /** 如果设置为 2 则表示只显示2行 */
-webkit-box-orient: vertical;
}注意：-webkit-line-clamp 是一个不规范的CSS属性（unsupported WebKit property），它不在CSS规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。
常见结合属性：
/* http://www.73so.com */ display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/ -webkit-box-orient /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/ text-overflow，/*可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。*/
以上就是关于CSS实现超过内容隐藏并显示省略号的方法，各位可以根据自己的需求进行选择使用！