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

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

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

效果如下:

相关推荐
涵涵(互关)10 分钟前
语法大全-only-writer-two
前端·vue.js·typescript
huangql52011 分钟前
浏览器 Location API、History API、路由记录与支付跳转完全指南
前端
木斯佳14 分钟前
前端八股文面经大全:腾讯前端实习一面(2026-04-27)·面经深度解析
前端·八股·面经
sayamber19 分钟前
Kubernetes 生产环境避坑指南:10 个真实故障案例与解决方案
前端
清寒_32 分钟前
分层理解AI架构,降低对AI复杂度的恐惧
前端·人工智能·ai编程
牧码岛1 小时前
Web前端之JavaScrip中的Array、Object、Map和Set详解
前端·javascript·web·web前端
Bigger1 小时前
😮‍💨 有了 AI 之后,我怎么感觉反而更累了?
前端·aigc·ai编程
Dxy12393102161 小时前
HTML中使用Canvas动态图形渲染:解锁Web交互新维度
前端·html·图形渲染
西陵1 小时前
如何实现 Claude 生成式 UI?一套可落地的工程方案
前端·人工智能·ai编程
FlyWIHTSKY1 小时前
Vue 3 + 原生 CSS Float
前端·css·vue.js