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

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

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

效果如下:

相关推荐
!执行1 小时前
高德地图 JS API 在 Linux 系统的兼容性解决方案
linux·前端·javascript
Gooooo1 小时前
现代浏览器的工作原理
前端
kk晏然2 小时前
TypeScript 错误类型检查,前端ts错误指南
前端·react native·typescript·react
纆兰2 小时前
汇款单的完成
前端·javascript·html
Lsx_2 小时前
案例+图解带你遨游 Canvas 2D绘图 Fabric.js🔥🔥(5W+字)
前端·javascript·canvas
m0_471199632 小时前
【场景】如何快速接手一个前端项目
前端·vue.js·react.js
榴莲CC3 小时前
抗干扰LED数显屏驱动VK1624 数码管显示芯片 3线串行接口
前端
Tigger3 小时前
用 Vue 3 做了一套年会抽奖工具,顺便踩了些坑
前端·javascript·vue.js
天天扭码3 小时前
一文搞懂——React 19到底更新了什么
前端·react.js·前端框架
weixin_462446233 小时前
【原创】使用langchain与MCP 与 Chrome DevTools 打造可调用浏览器工具的 Chat Agent
前端·langchain·chrome devtools