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;
}
相关推荐
这儿有一堆花11 分钟前
网站链接重定向原理
前端
cecyci19 分钟前
如何实现AI聊天机器人的打字机效果?
前端·javascript
IT_陈寒23 分钟前
Vite 5个隐藏技巧让你的项目构建速度提升50%,第3个太香了!
前端·人工智能·后端
詩句☾⋆᭄南笙31 分钟前
HTML的盒子模型
前端·html·盒子模型
落言33 分钟前
AI 时代的工程师:懂,却非懂的时代
前端·程序员·架构
一枚攻城狮35 分钟前
前端知识点大汇总
前端
余道各努力,千里自同风2 小时前
el-input 输入框宽度自适应宽度
javascript·vue.js·elementui
Mike_jia2 小时前
DumbAssets:开源资产管理神器,家庭与企业的高效管家
前端
Southern Wind2 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
HuangYongbiao3 小时前
Rspack 原理:webpack,我为什么不要你
前端