css如何实现超出部分显示省略号

这篇文章主要介绍了css如何实现超出部分显示省略号，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

超出部分显示省略号

//单行文本
.wrap{
overflow:hidden;/*超出部分隐藏*/
text-overflow:ellipsis;/*超出部分显示省略号*/
white-space:nowrap;/*规定段落中的文本不进行换行*/
}
//多行文本
.wrap{
width:100%;
overflow:hidden;
display:-webkit-box;//将对象作为弹性伸缩盒子模型显示*必须结合的属性*
-webkit-box-orient:vertical;//设置伸缩盒对象的子元素的排列方式*必须结合的属性*
-webkit-line-clamp:3;//用来限制在一个块元素中显示的文本的行数
word-break:break-all;//让浏览器实现在任意位置的换行*break-all为允许在单词内换行*
}

感谢你能够认真阅读完这篇文章，希望小编分享的“css如何实现超出部分显示省略号”这篇文章对大家有帮助，同时也希望大家多多支持博信，关注博信行业资讯频道，更多相关知识等着你来学习!