在前端开发中，文本内容的展示是一个很重要的部分。在某些情况下，文本内容可能会超出限定的长度，这时候就需要使用 Text-Overflow 属性来控制文本的溢出状态。而结合使用 Flexbox 和 Text-Overflow 属性可以实现单行、多行文本溢出显示省略号的效果，让你的页面有更好的排版效果。
Flexbox 简介
Flexbox 是一种布局方式，它可以处理页面中任何大小的元素，并且能够自适应不同大小的屏幕设备。使用 Flexbox 可以轻松实现页面上的自适应布局，同时还可以使页面更加灵活。
Flexbox 布局由三个属性组成：flex-direction（主轴方向）、justify-content（主轴上的对齐方式）和 align-items（交叉轴上的对齐方式）。这三个属性可以用来控制布局的方向和对齐方式。
.container {
display: flex;
flex-direction: row; // 主轴方向
justify-content: center; // 主轴上的对齐方式
align-items: center; // 交叉轴上的对齐方式
}Text-Overflow 简介
Text-Overflow 属性用于控制文本的溢出状态，通常与 white-space 属性一起使用。其中，white-space 属性用于控制文本的换行方式。
Text-Overflow 属性有三个值：clip（裁剪文本内容）、ellipsis（显示省略号）和 string（显示任意字符串）。通常情况下，我们使用 ellipsis 值来实现文本溢出时的省略号效果。
.container {
white-space: nowrap; // 避免文本换行
overflow: hidden;
text-overflow: ellipsis; // 文本溢出时显示省略号
}实现单行文本省略号效果
在实现单行文本省略号效果时，只需要使用 Flexbox 布局，并在需要省略的文本元素上应用 Text-Overflow 属性即可。
以下是一个实现单行文本省略号效果的示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- -------------------------------- ------ ------- ---------- - -------- ----- ------------ ------- ---------------- ------- ------- ----- - ----- - --------- ------- -------------- --------- ------------ ------- - --------
实现多行文本省略号效果
在实现多行文本省略号效果时，需要使用一个包含多行文本的容器，并通过添加伸缩项目使文本容器完全填充父容器。同样，在需要省略的文本容器上应用 Text-Overflow 属性，就可以实现多行文本省略号效果。
以下是一个实现多行文本省略号效果的示例代码：
-- -------------------- ---- -------
---- ------------------
---- -------------
------------------------------
------
------
-------
---------- -
-------- -----
------------ -------
---------------- -------
------- ------
-
----- -
--------- -------
-------------- ---------
-------- ------------
------------------- -- -- -------
------------------- ---------
-
--------总结
通过使用 Flexbox 和 Text-Overflow 属性，我们能够实现单行、多行文本溢出显示省略号的效果。在实际开发中，我们可以灵活运用这两个属性，让文本内容更加美观、清晰。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64dec2d2f6b2d6eab39e23fd