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

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

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

效果如下:

相关推荐
多加点辣也没关系7 分钟前
JavaScript|第6章:流程控制语句
开发语言·前端·javascript
csj508 分钟前
前端基础之《React(11)—state声明式》
前端·react.js
程序员晓琪8 分钟前
深入解析:从 Webpack 到 Vite,多入口多端项目的工程化迁移实战
前端·webpack·vite
涛涛ing10 分钟前
Vue 3.6 还没正式发布,但前端的方向已经被它定下来了
前端
阿新聊ai12 分钟前
Claude Code 为什么总不懂你的项目?缺一张「项目地图」
前端·后端·面试
暗冰ཏོ21 分钟前
Spring Boot + Vue3 订单支付模块技术实现:支付单、回调验签、幂等处理与余额扣减
前端·spring boot·后端·vue·微信支付·支付宝支付
Csvn23 分钟前
AbortController 不止能取消 Fetch!3 个你不知道的隐藏用法
前端·javascript
爷_30 分钟前
AI Coding Agent 沙箱的设计原理解析
前端·人工智能·后端
爱勇宝32 分钟前
第 3 章:别把团队设计成一场内卷竞赛
前端·后端·程序员