在前端开发中，我们常常会遇到这样的情况：当文本长度超出容器宽度时，需要在文本结尾处显示省略号（"..."）来表示被省略的内容。那么，如何使用 CSS 布局实现这个效果呢？在本篇文章中，我们将介绍一种新的方法：使用 CSS Flexbox 布局实现文本溢出省略号的技巧。
Flexbox 简介
CSS Flexbox 布局是一种用于管理容器中项目位置、大小和间距的布局方式。它通过 Flexbox 容器和 Flexbox 项目两个主要概念来实现。
- Flexbox 容器：一个应用了 Flexbox 布局的容器元素，包含零个或多个子项目。
- Flexbox 项目：Flexbox 容器中的一个子元素，它利用 Flexbox 容器的特性进行自我布局。
通过使用 CSS 属性来对 Flexbox 容器和 Flexbox 项目进行设置，我们可以很方便地控制项目在容器中的排列方式、空间分配和对齐方式。
实现文本溢出省略号的技巧
使用 Flexbox 布局实现文本溢出省略号的基本思路是：将文本容器和省略号容器都作为 Flexbox 容器的项目，在容器中使用 Flexbox 属性进行位置、大小和对齐的控制，同时利用 CSS overflow 属性设置文本容器的溢出行为。
下面是具体实现的步骤：
1. 创建 Flexbox 容器
首先，我们需要创建一个 Flexbox 容器，用来容纳文本容器和省略号容器。这里我们使用一个 div 元素作为容器，设置其 display 属性为 flex ，即可将其变成 Flexbox 容器。
.container {
display: flex;
}2. 创建文本容器和省略号容器
接下来，我们需要在 Flexbox 容器中创建两个子项目，一个用来容纳文本，一个用来容纳省略号。这里我们分别使用两个 span 元素作为容器。
<div class="container"> <span class="text">这是一段很长很长的文本内容，如果不做处理它将会超出容器宽度</span> <span class="ellipsis">...</span> </div>
3. 设置文本容器的宽度和溢出行为
接下来，我们需要设置文本容器的宽度和溢出行为，这里我们将文本容器的宽度设置为 100% ，并将其溢出行为设置为 ellipsis （也就是显示省略号）。
.text {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}4. 设置省略号容器的对齐方式
最后，我们需要设置省略号容器的对齐方式，这里我们将其垂直对齐方式设置为 center ，使省略号垂直居中对齐。
.ellipsis {
align-self: center;
}至此，使用 CSS Flexbox 布局实现文本溢出省略号的技巧完成了。
示例代码
最后，给出示例代码供大家参考：
-- -------------------- ---- -------
-------
---------- -
-------- -----
-
----- -
------ -----
--------- -------
-------------- ---------
-
--------- -
----------- -------
-
--------
---- ------------------
----- -------------------------------------------------
----- ---------------------------
------总结
通过本文介绍的方法，我们可以使用 CSS Flexbox 布局方便地实现文本溢出省略号的效果。同时，使用 Flexbox 布局还可以方便地控制容器和项目的位置、大小和对齐方式，是一种非常强大的 CSS 布局方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648aa39248841e98948bf610