CSS文本超限后使用省略号代替

方案一:

只显示一行,超限后使用省略号代替

css 复制代码
.detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

方案二:

显示多行,到最后一行还没有显示完,则最后一行多出来的部分使用省略号代替。

css 复制代码
.detail {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
相关推荐
AI前端老薛1 分钟前
CSS实现动画的几种方式
前端·css
携欢5 分钟前
portswigger靶场之修改序列化数据类型通关秘籍
android·前端·网络·安全
前端小L6 分钟前
专题二:核心机制 —— reactive 与 effect
javascript·源码·vue3
GuMoYu6 分钟前
npm link 测试本地依赖完整指南
前端·npm
代码老祖7 分钟前
vue3 vue-pdf-embed实现pdf自定义分页+关键词高亮
前端·javascript
未等与你踏清风7 分钟前
Elpis npm 包抽离总结
前端·javascript
代码猎人8 分钟前
如何使用for...of遍历对象
前端
用户51414448098248 分钟前
section与article的区别与使用场景
html
秋天的一阵风9 分钟前
🎥解决前端 “复现难”:rrweb 录制回放从入门到精通(下)
前端·开源·全栈
林恒smileZAZ9 分钟前
【Vue3】我用 Vue 封装了个 ECharts Hooks
前端·vue.js·echarts