前端开发中，经常需要实现多行文本显示和隐藏的效果。一种比较常见的实现方式是使用 CSS 属性 text-overflow、white-space 和 overflow，但这种方式只适用于单行文本。在实现多行文本的显示和隐藏时，可以使用 Flexbox。
Flexbox 入门
Flexbox 是 CSS3 引入的一种布局模式，用于实现复杂的布局和对齐。Flexbox 主要包括以下三个概念：
- flex container（容器）：包含 flex items 的容器。
- flex item（项目）：容器中的子元素。
- main axis（主轴）和 cross axis（侧轴）：主轴是 flex container 的主要方向，cross axis 是垂直于主轴的方向。
使用 Flexbox 时，需要设置容器的 display 属性为 flex。接下来，通过设置容器的 flex-direction 属性，可以确定主轴的方向。默认情况下，flex-direction 的值为 row，表示主轴的方向为水平方向。
多行文本显示和隐藏
要实现多行文本的显示和隐藏，需要使用 Flexbox 的两个属性：
flex-wrap：控制 flex items 在容器中是否换行。如果flex-wrap的值为nowrap，则 flex items 不换行；如果值为wrap，则 flex items 可以换行。overflow：控制容器的溢出效果。
首先，我们需要将容器的高度设为某一个确定的值，使得容器只能显示一部分 flex items。接着，设置 flex-wrap 的值为 wrap，如果 flex items 的数量大于容器中能够显示的数量，则 flex items 会在新的行上显示。最后，使用 overflow 属性控制溢出效果。
---------- - -------- ----- ---------- ----- ------- ------ --------- ------- -
这样就可以实现一个多行文本显示和隐藏的效果。如果希望在点击某一个按钮或者链接时显示或隐藏多行文本，可以结合 JavaScript 实现。将容器的高度设置为 0，点击按钮或者链接时，将容器的高度设置为某一个确定的值即可。
---- ------------------ -- ------------------ ----- ----- --- ----- ----------- ---------- ----- ------------ ------- ---- ----- -- ---------- --- ----- ----- -- ---- --------- --------- --- -- ---- ------ ----- ---- -------- ------ ----- ---- --- -------- ---- ----- --- ------- ------- ----------- ------ -- -------- ---------------------- --------
---------- - -------- ----- ---------- ----- ------- -- --------- ------- - --------------- - ------- ------ - ----- - ----------- ----- - ---------- - -------- ------ ----------- ------ - ---------------- - ---------------- ----- -
----- --------- - -------------------------------------
----- --- - -------------------------------------
----------------------------- -- -- -
-----------------------------------
-- -------------------------------------- -
------------- - ----- ------
- ---- -
------------- - ----- ------
-
---以上示例代码展示了如何在点击 Show More 按钮时，显示或隐藏多行文本。通过结合 JavaScript 和 Flexbox，我们可以实现一个简单有效的多行文本显示和隐藏的效果。
总结
Flexbox 是一种非常强大的 CSS 布局方式，它可以实现复杂的布局和对齐。在实现多行文本显示和隐藏的效果时，可以通过控制 Flexbox 的一些属性来实现。通过结合 JavaScript，我们可以实现一个非常完整的多行文本显示和隐藏的效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64772a92968c7c53b03b9b70