【CSS】文本溢出省略的两种方式

【CSS】文本溢出省略的两种方式

假设有一个卡片组件,组件里的内容有长有短,我们希望在内容很长的时候省略文字,以保证卡片的高度不会过高。

单行文本

要实现在文字超出时不显示超出部分,并用省略号表示还有更多文字,需要使用 CSStext-overflow、white-space overflow 属性。

完整的 .content css:

css 复制代码
.content {
    max-height: 500px;
    margin-bottom: 8px;
    word-break: break-all;
    display: block;
    overflow: hidden; /* 确保内容超出时隐藏 */
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    padding: 5px;
    color: #333;
    margin-bottom: 100px;

    /* 新增以下属性 */
    text-overflow: ellipsis; /* 超出部分显示为省略号 */
    white-space: nowrap; /* 保持内容在一行显示,如果需要多行,可以移除这行 */
}

这段代码中,overflow: hidden; 保证了内容超出部分会被隐藏,而 text-overflow: ellipsis; 则会在超出部分的末尾添加省略号。

然而,这段代码仅对单行文本起作用,在我们这个例子中,他是没有用的。

多行文本

使用 -webkit-line-clamp

最简单的方法是使用非标准的 -webkit-line-clamp 属性,它在大多数现代浏览器中都得到了支持。这个属性允许您指定显示的行数,并在超出这个行数时显示省略号。但请注意,这是一个非标准的、只在 WebKit/Blink 引擎(如 Chrome、Safari、新版 Edge)中有效的属性。

css 复制代码
.content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 指定显示的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 500px;
    margin-bottom: 8px;
    word-break: break-all;
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    padding: 5px;
    color: #333;
    margin-bottom: 100px;
}

这段代码将 .content 的内容限制为显示三行,并在第三行末尾显示省略号。

总结

如果您的用户群体主要使用支持 -webkit-line-clamp 的浏览器,那么这是一个简单有效的解决方案。但如果您需要一个更通用的解决方案,可能就需要使用 JavaScript 来实现。每种方法都有其优点和局限性,您需要根据项目的具体需求来选择合适的实现方式。

相关推荐
奶昔不会射手4 分钟前
css3之grid布局
前端·css·css3
举个栗子dhy8 分钟前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
Coding_Doggy14 分钟前
苍穹外卖前端Day1 | vue基础、Axios、路由vue-router、状态管理vuex、TypeScript
前端
前端与小赵14 分钟前
vue3和vue2生命周期的区别
前端·javascript·vue.js
用户4582031531718 分钟前
10个你可能不知道的实用CSS技巧,立竿见影提升开发效率
前端·css
在逃牛马18 分钟前
【Uni-App+SSM+MP 宠物实战】Day4:Uni-App 项目初始化
前端
J_Asia20 分钟前
如何exclude不必要的so文件?
前端
一鹿有你们~21 分钟前
面试题-前端如何解决跨域
前端·javascript·跨域
文心快码BaiduComate25 分钟前
文心快码升级至3.5S版本,强化多智能体自协同能力
前端·后端·程序员
Sailing26 分钟前
👉 👉 Vue3 自定义 Hook:从入门到进阶(~~安静的阅读2分钟,相信我,这篇文章一定能给你启发)
前端·javascript·vue.js