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

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

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

效果如下:

相关推荐
不一样的少年_2 分钟前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式
一枚前端小能手6 分钟前
🔥 滚动监听写到手抽筋?IntersectionObserver让你躺平实现懒加载
前端·javascript
我是日安6 分钟前
从零到一打造 Vue3 响应式系统 Day 5 - 核心概念:单向链表、双向链表
前端·vue.js
骑自行车的码农7 分钟前
React SSR 技术解读
前端·react.js
遂心_8 分钟前
React中的onChange事件:从原理到实践的全方位解析
前端·javascript·react.js
GHOME9 分钟前
原型链的原貌
前端·javascript·面试
阳焰觅鱼10 分钟前
react动画
前端
bug_kada11 分钟前
Flex布局/弹性布局(面试篇)
前端·面试
元元不圆11 分钟前
JSP环境部署
前端
槿泽12 分钟前
Vue集成Electron目前最新版本
前端·vue.js·electron