千家信息网

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

发表于:2025-01-23 作者:千家信息网编辑
千家信息网最后更新 2025年01月23日,这篇文章主要介绍了css如何实现超出部分显示省略号,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。超出部分显示省略号// 单行文本.wr
千家信息网最后更新 2025年01月23日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如何实现超出部分显示省略号"这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!

0