当文本内容超出容器宽度时,显示省略标记(...)

当文本内容超出容器宽度时,可以使用CSS中的text-overflow属性来实现文字溢出显示小点点的效果。下面是一种常见的使用方法:

html 复制代码
<style>
 div {
            width: 200px;
            height: 18px;
            font-size: 16px;
            white-space: nowrap; /* 设置文本不换行 */
            overflow: hidden; /* 隐藏溢出部分 */
            text-overflow: ellipsis; /* 文字溢出显示省略号 */
        }
</style>

效果如下:

相关推荐
clawdashi5 分钟前
2026 办公 Agent 选型指南:按场景分五类,一次讲清
前端·人工智能
驳是11 分钟前
代码洁癖患者会喜欢的几款 CLI 小工具
前端
Csvn12 分钟前
🛋️ requestIdleCallback:把非关键任务塞进浏览器的"空闲时间",告别卡顿
前端
江华森13 分钟前
从 fork 到协程:一次完整的操作系统并发编程实操
前端·程序员
四千岁16 分钟前
稀疏向量BM25Retriever不支持中文怎么办?jieba来帮忙
前端·javascript·后端
这是个栗子19 分钟前
【JS代码分析】前端鉴权基础:Token 的本地存储与状态重置实践
开发语言·前端·javascript
颜进强20 分钟前
14 - OpenSpec 老页面改造骨架:定位 + 增量 + 回归三件套
前端·后端·ai编程
做前端的娜娜子21 分钟前
async/await 错误处理:try...catch vs .catch() 完全指南
前端·面试·掘金·金石计划
半个落月24 分钟前
React 性能优化入门:用 memo 避免无关的子组件重复渲染
前端·react.js
北城笑笑32 分钟前
Server 18 ,Nginx + Vite 前端部署排错实战:从 `/api/gpt/chat` 404 到 9012 后端服务的完整定位过程
linux·运维·前端·nginx·ubuntu·vue