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

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

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

效果如下:

相关推荐
风花一世月5 分钟前
🛩️ 我把一段夕阳飞行做成了能按键驾驶的网页(24 秒四段航线,在线直接玩)
前端
用户114818678948413 分钟前
实现一个「配置驱动」的动态表格组件(Vue + Element UI)
前端
数据掘金16 分钟前
小程序分享参数在页面栈中的传递
前端
乐享qicheng16 分钟前
1,自定义表单通俗理解-PC设计APP渲染
前端
为你学会写情书17 分钟前
大屏适配别再只会 transform: scale 了,这套方案更稳
前端
孤独的神17 分钟前
《AI 成了我的工位搭子,也成了我的焦虑来源》
前端
行者全栈架构师21 分钟前
给开源 Rust 工具加一个新检查项,TRAE 帮我从想法跑到构建产物:全链路实战
前端·算法·架构
hunterandroid22 分钟前
[鸿蒙从零到一] relationalStore 高级实践:事务、迁移与敏感数据保护
前端
lcarusZZZ22 分钟前
前端转型,自建新闻转播客工作流
前端
vipxieliang28 分钟前
JavaScript 事件循环与任务队列:从 setTimeout 到 Promise
前端·javascript