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

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

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

效果如下:

相关推荐
张就是我1065921 小时前
DOMPurify 的一个漏洞:你以为 {} 是空的?
前端
疯狂的魔鬼2 小时前
一套 Schema 驱动四视图:记 useCrudSchemas 的设计与实践
前端·javascript·typescript
风骏时光牛马2 小时前
大模型开发工具高频故障与实操问题汇总代码案例大全
前端
没落英雄2 小时前
2. 让 Agent 能读写文件、执行命令 —— LocalShellBackend 实战
前端·人工智能·架构
白雾茫茫丶2 小时前
探索 Nuxt.js 全栈能力:用 Better-Auth 打造类型安全的 RBAC 权限系统
前端·vue.js·nuxt.js
奇奇怪怪的2 小时前
检索增强——混合检索、Re-rank 与 Query 优化
前端
user62229864925812 小时前
React 常用技术知识全景:从组件到 Hooks 的系统理解
前端
麻辣凉茶2 小时前
给阿嬤一封来自云端的信(上)
前端·node.js
前端缘梦2 小时前
LangGraph 实战:从 0 到 1 构建 AI 代码生成工作流
前端·程序员·全栈