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

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

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

效果如下:

相关推荐
A接拉起00719 分钟前
2026 年 JavaScript 开发者需要了解的知识
前端·javascript·后端
用户114818678948424 分钟前
面试官:大屏项目里十几个模块同时渲染上万条数据,怎么做到不卡?
前端·性能优化
前端市界27 分钟前
Pro React Admin: 统一工程底座,承载多种应用...
前端·github
葡萄城技术团队34 分钟前
dsh-spreadjs-editor 当前支持什么:安装前需要了解的几件事
前端
沫璃染墨35 分钟前
《Qt从零入门系列(十三):QSS样式表详解——从选择器与层叠规则到控件美化实战》
开发语言·css·c++·qt·ui·qt6.3·qss
三*一1 小时前
优化修整算法
前端·javascript·算法
weifont2 小时前
自动化抓取和上架商品:能不动手,就少动手
运维·前端·自动化
米柆2 小时前
HTML5 audio /video 完整事件监听模板
前端·html·html5
IT_陈寒3 小时前
Vite热更新失效?你可能也踩了这个坑
前端·人工智能·后端
程序员大阳3 小时前
副队长CSS教程(30)–CSS Grid 实战:实现复杂自适应表单布局
前端·css·自适应·grid·表单