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

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

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

效果如下:

相关推荐
BigTopOne几秒前
ArLiveLite -视频 PTS/DTS 时间戳详解
前端
数字化小张几秒前
时序数据库选型——InfluxDB与TDengine对比
前端
BigTopOne6 分钟前
ArLiveLite 用到的 OpenGL 技术点
前端
函数小陈6 分钟前
我给自己写了个「AI 代言人」
前端
FungLeo16 分钟前
React 管理后台实战 · 列表里突然出现一堆空白行?PIPL 擦除后前端怎么处理才不露馅
前端·react.js·状态模式·pipl
BigTopOne20 分钟前
ArLiveLite — System Architecture
前端
JL1532 分钟前
如何用 MySQL 持久化、历史快照与游标实现多步 Redo/Undo
前端·数据库·mysql
灯澜忆梦42 分钟前
【基于GO的Web开发9】gin框架返回json
前端·后端·golang·gin
IMPYLH1 小时前
HTML 的 <ins> 元素
前端·javascript·html
kymjs张涛1 小时前
DeepSeek Harness源码分析:非 AI 开发者的 Agent 学习总结
前端·后端·面试