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

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

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

效果如下:

相关推荐
এ慕ོ冬℘゜3 分钟前
纯 CSS 实现自定义 Switch 开关(商品上下架滑块)
前端·css
再吃一根胡萝卜3 分钟前
dompdf.js 分页功能完整实现指南
前端
wordbaby7 分钟前
App 热更新(OTA)原理深解 —— 以 React Native 为例
前端·react native
再吃一根胡萝卜17 分钟前
Vue + dompdf.js 实现简历分页导出的完整踩坑记录
前端
其美杰布-富贵-李30 分钟前
第 6 篇:相机与 OrbitControls
前端·javascript·three.js
lichenyang45334 分钟前
从图片生成任务到用户隔离:AIGC Creative Studio 后端与 PostgreSQL 建模实践
前端·后端
小黑技术栈1 小时前
关于前端的一些话
前端
无人生还2 小时前
从 Vue3 到 React · 快速上手系列第 11 篇:状态管理
前端·vue.js·react.js
GuWenyue2 小时前
90%前端写React TS都踩坑!一套父子组件+Hooks完整实战,彻底搞懂类型约束
前端·react.js
Hilaku2 小时前
当 AI 一天写完一周的代码,我们还剩什么优势?
前端·javascript·程序员