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;
}
相关推荐
恋猫de小郭4 分钟前
Firebase 如何让全球 Android 和 Flutter 开发者集体 Build Fail
android·前端·flutter
墨白曦煜5 分钟前
智能体架构范式总结(React、Plan-And-Solve、Reflection)
前端·react.js·前端框架
qq_426003968 分钟前
多语言新增语种全量测试策略的测试范围
前端·javascript·python·自动化
frjc20 分钟前
Node.js 与 npm 极简安装教程
前端·npm·node.js
IMPYLH21 分钟前
HTML 的 <main> 元素
前端·html
深念Y23 分钟前
微服务抽取路线图:从胖单体到 ARM 集群
前端·arm开发·数据库·后端·微服务·云原生·架构
阮小贰34 分钟前
干支编码的确定性实现:节气切分 + 1000 条溯源断语(附 JS 源码)
开发语言·javascript·ecmascript
雪芽蓝域zzs40 分钟前
Vue3 + Vite本地模拟数据(读取 JSON 数据)
前端
亿元程序员42 分钟前
还有高手?用Shader让图片中的3D圆环转起来!
前端
灯澜忆梦44 分钟前
【基于GO的Web开发14】gin请求重定向
前端·后端·golang·gin