css如何设置文字超出省略号(2)-木庄网络博客

2022-03-18 05:12:22 PHP中文网 JavaScript 百度已收录

设置内容显示为一行，内容超出后显示为省略号。为cont类添加内容显示为一行：white-space: nowrap; ，内容超出后显示为省略号：text-overflow: ellipsis; （注意：white-space: nowrap;和text-overflow: ellipsis;要同时使用才能显示为省略号）。

<style>
.cont{
    overflow:hidden;/*内容超出后隐藏*/
    text-overflow: ellipsis;/* 超出内容显示为省略号 */
    white-space: nowrap;/* 文本不进行换行 */
}
</style>

保存好代码后使用浏览器打开查看内容超出后显示为省略号的效果。

JNH]`0L31W`(P5KE1_RW26U.png

推荐学习：css视频教程

以上就是css如何设置文字超出省略号的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

更多相关阅读请进入《css》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » css如何设置文字超出省略号

css如何设置文字超出省略号

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论