CSS 实现文本溢出省略号显示，含单行与多行文本溢出

🚀 个人简介：某大型国企资深软件研发工程师，信息系统项目管理师、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入门到实战