🚀 个人简介：某大型国企资深软件研发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~
💟 作 者：码喽的自我修养🥰
📝 专 栏：HTML5与CSS3 🎉🌈 创作不易，如果能帮助到带大家，欢迎 收藏+关注 哦 💕
要使用 CSS 实现文本溢出时显示省略号，可以通过以下几种方法来实现：
1. 单行文本溢出
对于单行文本溢出显示省略号，可以使用以下 CSS 属性：
.ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 200px; /* 设置元素宽度 */border: 1px solid #ccc; /* 可选，用于展示边框 */
}示例 HTML：
<div class="ellipsis">这是一个示例文本，用于展示如何使用 CSS 实现文本溢出时显示省略号。
</div>2. 多行文本溢出
对于多行文本溢出显示省略号，可以使用以下 CSS 属性：
.multiline-ellipsis {display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;width: 200px; /* 设置元素宽度 */border: 1px solid #ccc; /* 可选，用于展示边框 */line-clamp: 3;-webkit-line-clamp: 3; /* 设置显示的行数 */line-height: 20px; /* 设置行高 */height: 60px; /* 根据行高和行数设置容器高度 */
}示例 HTML：
<div class="multiline-ellipsis">这是一个示例文本，用于展示如何使用 CSS实现多行文本溢出时显示省略号。这是一个示例文本，用于展示如何使用 CSS实现多行文本溢出时显示省略号。这是一个示例文本，用于展示如何使用 CSS实现多行文本溢出时显示省略号。
</div>3. 使用 Flexbox 实现文本溢出
如果你的布局是基于 Flexbox 的，你也可以结合 text-overflow: ellipsis 属性实现文本溢出显示省略号。
.flex-ellipsis-container {display: flex;width: 200px; /* 设置容器宽度 */
}.flex-ellipsis {flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;border: 1px solid #ccc; /* 可选，用于展示边框 */
}示例 HTML：
<div class="flex-ellipsis-container"><div class="flex-ellipsis">这是一个示例文本，用于展示如何使用 CSS 实现文本溢出时显示省略号。</div>
</div>
以上方法可以帮助你在不同场景下实现文本溢出时显示省略号。单行文本溢出使用 white-space: nowrap;、overflow: hidden; 和 text-overflow: ellipsis;，而多行文本溢出则需要结合 -webkit-line-clamp 和 -webkit-box 属性。根据具体的布局需求，还可以结合 Flexbox 等布局方式来实现。
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家点点收藏+关注~💕
更多专栏订阅推荐：
🥕 JavaScript深入研究
👍 前端工程搭建
💕 vue从基础到起飞✈️ HTML5与CSS3
🖼️ JavaScript基础
⭐️ uniapp与微信小程序
📝 前端工作常见问题与避坑指南
✍️ GIS地图与大数据可视化
📚 常用组件库与实用工具
💡 java入门到实战
