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

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

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

效果如下:

相关推荐
XiaoYu20025 分钟前
第5章 Nest.js精进-IOC控制反转
前端
LV技术派6 分钟前
适合很多公司和团队的 AI Coding 落地范式(二)
前端·aigc·ai编程
IT_陈寒6 分钟前
Redis性能翻倍的5个冷门技巧:从每秒10万到20万的实战优化之路
前端·人工智能·后端
ss27311 分钟前
高版本node启动RuoYi-Vue若依前端ruoyi-ui
前端·javascript·vue.js
饼干,16 分钟前
模拟试卷2
前端·javascript·easyui
南雨北斗32 分钟前
js 严格模式
前端
聪明的Levi36 分钟前
FRONT END REVIEW
前端·css·html
仙人掌一号1 小时前
React 白屏机制原理分析[共1500字,阅读时长8min]
前端·javascript·面试
sophie旭1 小时前
Suspense+React.lazy--组件渲染如何暂停 → 等待 → 恢复
前端·javascript·react.js
我的div丢了肿么办1 小时前
js中worker的详细讲解
前端·javascript·vue.js