Flexbox 是一种 CSS 布局模式，用于创建灵活的、响应式的网页布局。在前端开发中，经常会遇到需要在一个容器中显示多行文本的情况。如果文本内容过长，就会导致容器溢出，影响页面的展示效果。本文将介绍如何使用 Flexbox 实现多行文本的换行和省略号，以提高页面的可读性和美观度。
换行
在 Flexbox 中，可以使用 flex-wrap 属性来控制容器中的元素是否换行。默认情况下，flex-wrap 属性的值为 nowrap，即不换行。如果需要在容器中实现多行文本的换行，可以将 flex-wrap 属性的值设置为 wrap。
.container {
display: flex;
flex-wrap: wrap;
}上述代码中，.container 为容器的类名，display 属性设置为 flex，表示将容器的子元素按照 Flexbox 布局进行排列。flex-wrap 属性设置为 wrap，表示容器中的元素可以自动换行。这样，在容器中添加多行文本时，文本会自动换行，不会溢出容器。
省略号
当文本内容过长时，如果要在容器中显示省略号，可以使用 text-overflow 和 white-space 属性来实现。text-overflow 属性用于控制文本溢出时的显示方式，可以设置为 ellipsis，表示使用省略号代替溢出的文本。white-space 属性用于控制文本的换行方式，可以设置为 nowrap，表示不换行。
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - --------- ------- -------------- --------- ------------ ------- -
上述代码中，.text 为文本的类名，overflow 属性设置为 hidden，表示超出容器范围的文本将被隐藏。text-overflow 属性设置为 ellipsis，表示使用省略号代替溢出的文本。white-space 属性设置为 nowrap，表示文本不换行。这样，在容器中添加文本时，超出容器范围的文本会被隐藏，并使用省略号代替。
示例代码
下面是一个使用 Flexbox 实现多行文本的换行和省略号的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ---------------------
-------
---------- -
-------- -----
---------- -----
------ ------
------- ------
------- --- ----- -----
-------- -----
-
----- -
--------- -------
-------------- ---------
------------ -------
------------- -----
-------------- -----
-------- ----
------- --- ----- -----
-
--------
-------
------
---- ------------------
---- ----------------------------------------------
---- ----------------------------------------------
---- ----------------------------------------------
---- ----------------------------------------------
---- ----------------------------------------------
---- ----------------------------------------------
---- ----------------------------------------------
---- ----------------------------------------------
---- ----------------------------------------------
------
-------
-------在上述示例代码中，.container 为容器的类名，width 和 height 属性设置为固定值，表示容器的宽度和高度。.text 为文本的类名，margin-right 和 margin-bottom 属性设置为固定值，表示文本之间的间距。通过设置 overflow: hidden;、text-overflow: ellipsis; 和 white-space: nowrap; 属性，实现了多行文本的换行和省略号。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d31d79a941bf71345e5781