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

69次阅读
没有评论

共计 568 个字符,预计需要花费 2 分钟才能阅读完成。

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

超出部分显示省略号

//  单行文本
.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 为允许在单词内换行 *
}

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

正文完
 
丸趣
版权声明:本站原创文章,由 丸趣 2023-08-03发表,共计568字。
转载说明:除特殊说明外本站除技术相关以外文章皆由网络搜集发布,转载请注明出处。
评论(没有评论)