CSS3 中引入了 Flexbox 布局，提供了一种新的排版方式。在项目中，我们常常需要实现多行文本溢出，这时候 Flexbox 布局可以很好地解决这个问题。
什么是 Flexbox 布局
Flexbox 布局是一种弹性盒子模型，可以轻松地实现对元素按照一定的规则排列和对齐。它的主要作用是替代使用传统布局方式时需要使用大量代码来实现特别复杂的页面布局的情况。由于支持度较高和代码简洁易懂，目前已经成为了前端布局的主流方式之一。
Flexbox 有两个概念比较重要，分别是容器和项目。容器是被设置为 Flexbox 布局的父元素，它的作用是控制子元素的展示。项目则是容器中的子元素，这里的子元素是一个广义的概念，可以是任意的 HTML 元素。
多行文本溢出实现
在实际项目中，我们常常需要实现多行文本溢出，这时候，如果不使用 Flexbox 布局，实现起来就比较麻烦。不同的浏览器对于多行文本溢出的默认处理方式也不尽相同，这给我们的实现工作增加了难度。
使用 Flexbox 布局的方式实现多行文本溢出，主要需要使用 flex-wrap 和 flex-shrink 两个属性。 flex-wrap 属性用于控制多余的项目如何换行，它有以下几个取值：
nowrap：默认值，所有的项目会在同一行内排列，会在需要时缩小项目的宽度；wrap：多余的项目会换行，第一行位于顶部；wrap-reverse：多余的项目会换行，第一行位于底部。
而 flex-shrink 属性用于控制项目的缩小比例，它的取值为一个数值，数值越大表示项目缩小的比例越大。
在使用 Flexbox 布局实现多行文本溢出时，我们需要先将容器设置为 Flexbox 布局，并开启多行文本溢出的功能：
---------- - -------- ----- ---------- ----- -
接着，我们需要对每个子元素进行设置。由于父元素已经开启了多行文本溢出的功能，所以我们只需要设置子元素缩小的比例即可。一般情况下，我们将 flex-shrink 属性设置为 1 或者不设置，这样就能够在父元素宽度不足时按照比例缩小子元素的宽度了。
----- - ------------ -- -
最后，我们需要在子元素的内容区域上添加文本溢出的样式，这里可以使用 text-overflow 和 white-space 两个属性。 text-overflow 属性用于控制文本如何溢出，它有以下三个取值：
clip：默认值，文本会被裁剪，并且不会显示省略号；ellipsis：文本溢出时使用省略号显示；string：文本溢出时使用指定的字符串显示。
而 white-space 属性用于控制空白字符的处理方式，它有以下几个取值：
normal：空白字符会被压缩；nowrap：空白字符不会被压缩；pre：空白字符会保留；pre-line：空白字符会压缩，但是换行符会保留。
在实际项目中，我们一般使用 ellipsis 和 nowrap 两个属性。以下是示例代码：
----- - ------------ -- ------------ ------- -------------- --------- --------- ------- -
总结
本文介绍了 Flexbox 布局以及如何通过 Flexbox 布局实现多行文本溢出。通过本文的介绍，相信读者已经能够掌握如何使用 Flexbox 布局实现多行文本溢出的方法了。在实际项目中，我们可以根据需求进行优化，比如调整子元素 flex-shrink 属性的取值或者更改 white-space 属性的取值。
希望本文可以对读者们有所帮助，谢谢大家的阅读！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648c492948841e9894aa2ce4