在前端的开发中，多行文本内容溢出的情况是比较常见的。通常情况下，我们可以使用 text-overflow 和 overflow 属性来进行设置。但是，这只适用于单行文本的情况。对于多行文本，CSS Flexbox 可以轻松实现多行文本溢出显示省略号的效果。本文将介绍如何使用 CSS Flexbox 实现多行文本溢出显示省略号。
Flexbox 布局
Flexbox 布局是一种基于 CSS3 实现的弹性盒模型布局，可以非常方便地实现各种布局方式。在 Flexbox 布局中，我们可以使用 flex 属性来指定每个子元素在主轴和交叉轴上的布局方式。默认情况下，子元素在主轴上的布局方式是水平排列，而在交叉轴上的布局方式是垂直排列。
实现多行文本溢出显示省略号
下面，我们将通过一个简单的示例来演示如何使用 CSS Flexbox 实现多行文本溢出显示省略号的效果。
首先，我们创建一个 HTML 文档，并在其中添加一段多行文本：
<div class="container"> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget tincidunt ex, eu cursus nisi. Aenean et velit orci. Nulla ultrices felis sapien, sed viverra dolor rutrum at. Morbi sit amet nibh augue. Sed blandit porttitor nunc, et blandit ligula faucibus ac. Duis non dapibus orci.</p> </div>
接下来，我们使用 CSS Flexbox 布局来实现在容器中显示多行文本溢出并显示省略号的效果：
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- ---------------- ------- ------- ------ - ----- - -------- ------------ ------------------- --------- ------------------- -- --------- ------- -------------- --------- -
在上面的示例中，我们首先通过 display: flex; 属性将容器转化为 Flexbox 布局，然后使用 align-items: center; 和 justify-content: center; 属性将子元素在主轴和交叉轴上居中对齐。接下来，在 .text 类中，我们使用 -webkit-box 属性来将 p 标签转化为一个 Flexbox 容器，并使用 -webkit-box-orient: vertical; 属性将子元素垂直排列。然后，我们使用 -webkit-line-clamp: 3; 属性来指定文本最多显示三行，并使用 overflow: hidden; 和 text-overflow: ellipsis; 属性来实现文本溢出显示省略号的效果。
总结
本文介绍了如何使用 CSS Flexbox 布局实现多行文本溢出显示省略号的效果。通过使用 Flexbox 布局和一些简单的 CSS 属性，我们可以轻松实现各种布局方式和效果。希望本文能对读者在前端开发中实现多行文本溢出显示省略号有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648841b148841e98946c5628