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

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

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

效果如下:

相关推荐
web像素之境13 小时前
前端工程化梳理
前端
小林ixn14 小时前
全栈项目实战:前端独立开发,不再傻等后端接口
前端·javascript·react.js
李剑一14 小时前
Anthropic将在AI生成文本中嵌入水印!难道是用我之前写的这个技术?
前端·aigc·ai编程
Asize14 小时前
前端接口工程:axios + mock,前端不再傻等后端
前端·javascript
结网的兔子14 小时前
【前端开发】UniApp 项目地图选型与Web-APP跨端迁移方案
前端·uni-app
Canace14 小时前
给 Claude 一个链接,它真的读了原文吗
前端·人工智能·ai编程
爱丶不疚14 小时前
Electron net 模块你可以没用过,但不能不知道
前端·electron
cidy_9814 小时前
React + Ant Design 通用企业数据统计模块实战
前端
渣波14 小时前
React 性能优化与状态管理双雄:useMemo 与 useReducer 深度解析
前端·javascript
Maxkim14 小时前
把智能体塞进浏览器侧边栏:我在 MV3 里踩的 5 个坑
前端·后端