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

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

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

效果如下:

相关推荐
GalenZhang8882 分钟前
OpenClaw 配置多个飞书账号实战指南
前端·chrome·飞书·openclaw
萌新小码农‍1 小时前
python装饰器
开发语言·前端·python
threelab2 小时前
Three.js 初中数学函数可视化 | 三维可视化 / AI 提示词
开发语言·前端·javascript·人工智能·3d·着色器
爱学习的程序媛2 小时前
浏览器工作原理全景解析
前端·浏览器·web
我是若尘3 小时前
用 Git Worktree 同时开多个需求,不用来回 stash
前端
IT_陈寒3 小时前
Vue的v-for为什么不加key也能工作?我差点翻车
前端·人工智能·后端
小碗羊肉3 小时前
【JavaWeb | 第十二篇】项目实战——登录功能
java·前端·数据库
一个处女座的程序猿O(∩_∩)O3 小时前
如何保持nginx配置与前端打包dist的路径保持一致、解决页面刷新白屏以及页面跳转问题
运维·前端·nginx
十有八七4 小时前
AI 开发,本质是一场文档的生命周期管理
前端·人工智能
Hyyy5 小时前
普通前端自救记录——第0周
前端