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

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

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

效果如下:

相关推荐
王林不想说话7 小时前
React自定义Hooks
前端·react.js·typescript
heyCHEEMS7 小时前
Uni-app 性能天坑:为什么 v-if 删不掉 DOM 节点
前端
马致良7 小时前
三年前写的一个代码工具,至今已被 AI Coding 完全取代。
前端·ai编程
橙某人7 小时前
LogicFlow 交互新体验:让锚点"活"起来,鼠标跟随动效实战!🧲
前端·javascript·vue.js
借个火er7 小时前
依赖注入系统
前端
借个火er7 小时前
项目介绍与环境搭建
前端
gustt7 小时前
React 跨层级组件通信:从 Props Drilling 到 useContext 的实战剖析
前端·react.js
程序猿的程7 小时前
Stock写给前端的股票行情 SDK: stock-sdk,终于不用再求后端帮忙了
前端·javascript·node.js
用户新7 小时前
V8引擎 精品漫游指南 -解析篇 语法解析 AST 作用域 闭包 字节码 优化 一文通关
前端·javascript
黑土豆7 小时前
2025,我不再写代码,我在当代码的“审核员”
前端·vue.js·ai编程