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

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

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

效果如下:

相关推荐
usdoc文档预览13 小时前
USDOC系列之PPT文件在线编辑-VUE前端实现在线浏览器在线编辑PPT文档
前端·vue.js·编辑器·office365·ppt在线编辑·office文件在线编辑·文件在线编辑
用户27050777252414 小时前
Agent 调工具卡住?3 种超时与取消策略实测对比
前端
LuHang15 小时前
我一行代码没写,把领导派的活做成了公司内部系统😭
前端
明月_清风15 小时前
Meta 开源了一个 AI Native 组件库:Astryx,150+ React 组件,专为 AI Agent 而设计
前端·人工智能·ai编程
用户8508692761515 小时前
秒杀系统中 Shell 脚本并发控制 Bug:究竟哪里出了
前端
程序员大阳17 小时前
HTML+CSS+JS对话式实战(3)-活动管理页实现查询、新增、删除API后端接口
javascript·css·html·实战·删除·查询·新增
炫酷的大高个18 小时前
6 亿播放的闪身步,我用前端算出 15 倍重心差
前端·javascript
不可能片场18 小时前
内容运营自动化 配图折行别把词切两半
前端·electron
Lank_M18 小时前
HEIC转JPG统一转sRGB,P3高饱和色就回不来了
前端
补码缩写18 小时前
sharp默认转JPG颜色没错,ICC和EXIF却全没了
前端