Flexbox 实现响应式三行文本溢出省略号

当我们在设计网页布局时，有时候需要在一个容器内显示一些长度不固定的文本内容。但是，当文本过长时，容器的高度会被撑高，导致整体布局变得很不美观。这时候，我们需要实现文本溢出省略号的功能，让页面更加美观。

在过去，我们可能会通过 JavaScript 来截断文本，再添加省略号。但这种方法操作繁琐，且不够灵活。现在，使用 Flexbox 可以轻松地实现这个功能，并且具有很好的响应式布局。

什么是Flexbox?

Flexbox，英文全称为 Flexible Box Layout Module，是一种用来控制容器内项目排列方式的 CSS3 布局模块。

使用 Flexbox，我们可以轻松地实现复杂布局，比如平分容器内的元素，让元素自适应剩余空间等等。

在了解如何使用 Flexbox 实现省略号前，我们先来了解 Flexbox 的几个核心概念：

1. 容器（Container）：拥有 Flexbox 布局的父元素。
2. 项目（Item）：容器内的子元素，都是 Flexbox 布局对象。
3. 轴线（Axis）：容器内的主轴，可以是水平方向或竖直方向。默认是水平方向。
4. 交叉轴（Cross Axis）：跟主轴垂直的轴线。

根据这几个概念，我们可以使用 Flexbox 设置容器的布局方式，以及控制项目在容器内的排列顺序和对齐方式。

如何使用Flexbox实现文本溢出省略号？

现在，我们来具体介绍如何使用 Flexbox 实现文本溢出省略号的功能。

首先，我们将需要省略号的文本放置在一个容器中，例如下面这个示例：

<div class="box">
  <p class="text">这是一段超长的文本内容</p>
</div>

然后，我们给容器设置如下的 Flexbox 属性：

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90px;
  overflow: hidden;
}

解释一下这些属性的含义：

1. display: flex：设置容器的布局为 Flexbox。
2. flex-direction: column：设置项目在容器的排列方向为竖直方向。
3. justify-content: center：设置项目在主轴方向上居中。
4. align-items: center：设置项目在交叉轴方向上居中。
5. height: 90px：设置容器的高度。
6. overflow: hidden：溢出部分隐藏。

接下来，我们给文本添加如下的样式：

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

这段 CSS 代码实现了文本的溢出省略号，具体含义如下：

1. -webkit-box：将文本显示在块容器内。
2. -webkit-box-orient: vertical：设置文本在竖直方向上溢出省略。
3. -webkit-line-clamp: 3：设置文本只显示三行，超过的部分溢出省略。
4. overflow: hidden：溢出部分设置隐藏。
5. text-overflow: ellipsis：在文本溢出的部分显示省略号。

总结

Flexbox 是一种非常强大的 CSS 布局模块，它可以轻松地实现复杂的页面布局和响应式设计。在实现文本溢出省略号方面，Flexbox 更是为我们提供了非常便利的选择。

通过本文的介绍，我们了解了如何使用 Flexbox 实现响应式三行文本溢出省略号，并且深入了解了 Flexbox 的几个核心概念。希望这篇文章能对你掌握 Flexbox 布局有所帮助！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6542aaff7d4982a6ebc53713