温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2022-03-07 14:26:47 来源:亿速云 阅读:235 作者:小新 栏目:云计算

这篇文章主要介绍了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如何实现超出部分显示省略号”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI