技术栈

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

哟哟-2024-06-22 19:28

方案一:

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

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;
}
上一篇:【css】如何修改input选中历史选项后,自动填充的蓝色背景色
下一篇:掌握Linux技能:关键命令与测试题解析
相关推荐
kyriewen
8 小时前
手写虚拟DOM后,我反问面试官:key为什么不能用index?
前端·react.js·面试
padane22
8 小时前
gmssl编译wasm
ubuntu·html·密码学·wasm·js
Doris_2023
8 小时前
说一说ESLint+Prettier生效的原理
前端·设计模式·架构
ZC跨境爬虫
8 小时前
跟着 MDN 学CSS day_21:(图像溢出控制与表单元素样式定制)
前端·javascript·css·ui·交互
卷帘依旧
8 小时前
微前端解决方案-qiankun
前端
moshuying
8 小时前
你做的,比汇报出来的多得多
前端
shuye216
8 小时前
google chrome 离线下载地址
前端·chrome
yqcoder
9 小时前
闭包是什么?优缺点、怎么防内存泄漏?
前端·http
riuphan
9 小时前
JavaScript 中的 this 关键字
javascript
掰头战士
9 小时前
五分钟带你深入了解 this
javascript
热门推荐
01GitHub 镜像站点02DeepSeek V4 + Claude Code thinking mode 400 错误修复方案03【踩坑记录 | 第一篇】微软商店无法使用时,如何手动安装 OpenAI Codex?附`.msix`文件系统错误解决方法04Codex 接入 DeepSeek API 完整配置文档05【AI】2026 年具身智能模型和世界模型总结06CC-Switch & Claude 基于 Linux 服务器安装使用指南07裂开!ChatGPT 居然开始要手机号验证,附详细解决方法08CC-Switch 全平台下载、安装与使用全指南(Windows/macOS/Linux)092026年AI编程工具终极横评:Cursor vs Claude Code vs Copilot10OpenAI Codex Desktop App 保姆级安装教程(Windows / Mac)