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

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

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

效果如下:

相关推荐
用户3802258598245 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴11 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干14 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗16 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder21 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder24 分钟前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github
snakeshe101025 分钟前
优化 Mini React:实现组件级别的精准更新
前端
前端小盆友25 分钟前
从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
前端·gpt·react.js
京东云开发者31 分钟前
行云前端重构之路:从单体应用到 Monorepo 的血泪史
前端
whale fall33 分钟前
npm install安装不成功(node:32388)怎么解决?
前端·npm·node.js