css控制文本超出省略（单行、两行、多行）

您所在的位置：网站首页 › css内容超出省略号 › css控制文本超出省略（单行、两行、多行）

css控制文本超出省略（单行、两行、多行）

2023-04-02 16:45| 来源: 网络整理| 查看: 265

css控制文本超出省略（单行、两行、多行）原创

农民工前端 2023-03-30 17:28:40 博主文章分类：js ©著作权

文章标签 css 超出隐藏文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者农民工前端的原创作品，请联系作者获取转载授权，否则将追究法律责任

想要控制文本长度？想要文本超出隐藏？还想要不用JavaScript实现？让我们来用css试试吧~

本文重点

css控制文本超出省略。完成单行、两行、多行的效果

注意点

本文提到的方法都需要控制元素width的大小

单行省略： overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 两行省略： word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 超出几行省略 */ overflow: hidden; 多行省略： word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 超出几行省略 */ overflow: hidden; 赞收藏评论分享举报

上一篇：vue面试题八股文简答大全让你更加轻松的回答面试官的vue面试题

下一篇：漫画|web的主要安全问题

【本文地址】

css控制文本超出省略（单行、两行、多行）

css控制文本超出省略（单行、两行、多行）

今日新闻

推荐新闻