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

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

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

效果如下:

相关推荐
爱学习的小仙女!几秒前
面试题 前端(二)元素显示模式 块元素行内元素区别
前端·前端面试题
酉鬼女又兒2 分钟前
零基础快速入门前端蓝桥杯 Web 备考:AJAX 与 XMLHttpRequest 核心知识点及实战(可用于备赛蓝桥杯Web应用开发)
前端·ajax·职场和发展·蓝桥杯·css3·js
Sammyyyyy4 分钟前
Node.js、Bun 与 Deno,2026 年后端运行时选择指南
前端·后端·node.js·servbay
默 语6 分钟前
Web Access:一个Skill,拉满Agent联网和浏览器能力
前端·agent·skill
攒了一袋星辰8 分钟前
类抖音的高并发评论盖楼系统
服务器·前端·数据库
大胡子大叔9 分钟前
React组件化实现程序化视频生成
前端·react.js·音视频
wjcroom13 分钟前
融释涡旋理论-对狭义相对论和洛伦兹变换的兼容
开发语言·前端
2601_9553544616 分钟前
SEO新手如何快速入门学习
前端·学习·搜索引擎
小和尚敲木头16 分钟前
router.push(‘/‘)跳转不触发重定向
开发语言·前端·javascript