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

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

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

效果如下:

相关推荐
mCell17 分钟前
使用 useSearchParams 同步 URL 和查询参数
前端·javascript·react.js
mCell2 小时前
前端路由详解:Hash vs History
前端·javascript·vue-router
海上彼尚2 小时前
无需绑卡的海外地图
前端·javascript·vue.js·node.js
1024肥宅2 小时前
手写 call、apply、bind 的实现
前端·javascript·ecmascript 6
科杰智能制造3 小时前
纯前端html、js实现人脸检测和表情检测,可直接在浏览器使用
前端·javascript·html
每天吃饭的羊3 小时前
组件库的有些点击事件是name-click这是如何分装de
前端·javascript·vue.js
x***01063 小时前
SpringSecurity+jwt实现权限认证功能
android·前端·后端
1024肥宅3 小时前
防抖(Debounce)
前端·javascript·ecmascript 6
1024肥宅4 小时前
节流(Throttle)
前端·javascript·ecmascript 6
大怪v4 小时前
【Virtual World 02】两点一线!!!
javascript·css·html