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;
}
相关推荐
xcjbqd08 分钟前
CSS中隐藏元素的多重技巧与应用场景
前端·css
Ruihong9 分钟前
你的 Vue 3 <script setup>,VuReact 会编译成完整的 React 组件
vue.js·react.js·面试
chenbin___11 分钟前
检查hooks依赖的工具(转自千问)
开发语言·前端·javascript·react native·react.js
阿凤2125 分钟前
uniapp运行到app端怎么打开文件
android·前端·javascript·uni-app
久爱@勿忘27 分钟前
vue/uniapp H5页面截图
开发语言·前端·javascript
Rabitebla32 分钟前
C++类和对象(中):默认函数 + 运算符重载 + 日期类实现完整笔记
java·开发语言·javascript
渔舟小调37 分钟前
P12 | 标签体系:灵活的多维标签设计与前端联动
前端
小李子呢02111 小时前
前端八股浏览器网络(2)---cookie,localStorage,sessionStorage
前端·网络
小李子呢02111 小时前
前端八股Vue---插槽
前端·javascript·vue.js