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

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

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

效果如下:

相关推荐
李昊哲小课2 分钟前
电商系统项目教程
开发语言·前端·javascript
smxgn22 分钟前
spring-boot-starter和spring-boot-starter-web的关联
前端
王中阳Go30 分钟前
2026年,前端这个岗位可能真的要消失了,但另一个正在崛起
前端
wing9839 分钟前
Vue3 接入 Google 登录:极简教程
前端·vue.js·google
weixin1997010801644 分钟前
货铺头商品详情页前端性能优化实战
java·前端·python
new code Boy1 小时前
NestJS、Nuxt.js 和 Next.js
前端·后端
进击切图仔2 小时前
执行 shell 脚本 5 种方式对比
前端·chrome
局i2 小时前
React 简单地图组件封装:基于高德地图 API 的实践(附源码)
前端·javascript·react.js
执行部之龙2 小时前
AI对话平台核心技术解析
前端
yuki_uix2 小时前
防抖(Debounce):从用户体验到手写实现
前端·javascript