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

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

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

效果如下:

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