在 Web 开发过程中，我们经常需要使用文本来描述一些内容，在某些场景下，文本可能会超出一行，这时候，我们通常需要使用省略号来表示文本已被部分隐藏。但是，在多行文本场景下，如何使用省略号来达到最佳的视觉效果呢？本文将介绍一种基于 Flexbox 布局的方法，实现多行文本省略号的完美实现方法。
实现原理
要实现多行文本省略号，我们需要先了解一些相关的 CSS 属性。
white-space 属性
white-space 属性用于设置如何处理元素中的空白符（空格、换行等）。常见的值有：
- normal：默认值。合并连续的空白符，换行符被当作空格处理，超出容器宽度的部分会被自动换行。
- nowrap：不允许换行。
- pre：空白符会被保留，只有遇到
<br>或<pre>标签才会换行。 - pre-wrap：空白符会被保留，换行符会被保留，超出容器宽度的部分会被自动换行。
- pre-line：合并连续的空白符，但换行符会被保留，超出容器宽度的部分会被自动换行。
text-overflow 属性
text-overflow 属性用于指定当文本溢出容器时，如何显示省略号。它只在元素的 overflow 属性为 hidden 时生效。常见的值有：
- clip：默认值。文本溢出容器时，会被截断。
- ellipsis：文本溢出容器时，会显示省略号。
overflow 属性
overflow 属性用于指定溢出内容的部分如何处理。常见的值有：
- visible：默认值。溢出的内容不会被修剪，会呈现在元素框外面。
- hidden：溢出的内容会被修剪，不会呈现在元素框外面。
- scroll：溢出的内容会被修剪，并会产生滚动条，用户可以通过滚动滚动条来查看元素中的内容。
- auto：与 scroll 类似，但只有在内容溢出时才会产生滚动条。
line-clamp 属性
line-clamp 属性用于限制元素显示的行数。但是，它目前只被 Safari 浏览器支持，其他浏览器都不支持它。
现在我们已经了解了相关的 CSS 属性，那么如何实现多行文本省略号呢？
我们可以将文本包裹在一个容器内，并对这个容器应用一些样式。具体来说，我们需要：
- 对容器设置一个固定的高度。
- 将文本包裹在一个内部容器中，并对这个内部容器应用一些样式，如：white-space: nowrap; text-overflow: ellipsis; overflow: hidden;。
- 使用 Flexbox 布局使内部容器可以占据多行。
接下来，我们会详细讲解每一步的实现。
实现步骤
步骤一：设置容器高度
首先，我们需要在 HTML 中创建一个容器，例如：
<div class="container"> // 文本内容 </div>
在 CSS 中设置容器高度为多行高度的具体值，例如：
.container {
height: 60px;
}步骤二：设置内部容器样式
在容器中，我们还需要添加一个内部容器，用于包裹文本，并添加一些样式。例如：
<div class="container">
<div class="inner">
// 文本内容
</div>
</div>在 CSS 中，我们需要为内部容器添加以下样式：
.inner {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}这些样式的作用是：
- 设置 white-space 为 nowrap，禁止文本换行，确保文本在同一行上。
- 设置 text-overflow 为 ellipsis，当文本溢出容器时，显示省略号。
- 设置 overflow 为 hidden，将超出容器宽度的部分隐藏，以免对其他元素产生影响。
步骤三：使用 Flexbox 布局
为了实现多行文本省略号，我们需要使用 Flexbox 布局。具体来说，我们需要：
- 设置容器为 Flexbox 容器。
- 设置内部容器的 Flexbox 属性，使其可以占据多行。
例如：
-- -------------------- ---- ------- ---------- - ------- ----- -------- ----- ------------ ----------- - ------ - ------------ ------- -------------- --------- --------- ------- -------- ------------ ------------------- --------- ------------------- -- -- -- - ------ -
在上面的例子中，我们设置了：
.container为 Flexbox 容器，并设置align-items为flex-start，以使内部容器靠上对齐。.inner为 Flexbox 容器，且使用了-webkit-box前缀，以兼容 WebKit 内核的浏览器。-webkit-box-orient指定了内部容器为竖直方向上的 Flexbox 容器。-webkit-line-clamp指定了内部容器显示的行数为 3 行以内。
值得注意的是，-webkit-line-clamp 目前只在 WebKit 内核的浏览器中被支持。为了兼容其他浏览器，我们需要添加 display: -webkit-box; 和 -webkit-box-orient: vertical; 这两个属性。
示例代码
下面是一个完整的多行文本省略号实现的示例代码：
-- -------------------- ---- -------
---- ------------------
---- --------------
------ ---------- ------------------------------------------------------------------------------------------
------
------
-------
---------- -
------- -----
-------- -----
------------ -----------
-
------ -
------------ -------
-------------- ---------
--------- -------
-------- ------------
------------------- ---------
------------------- -- -- -- - ------
-
--------总结
通过本文介绍的方法，我们可以轻松实现多行文本省略号，并达到最佳的视觉效果。需要注意的是，由于 -webkit-line-clamp 属性目前只在 WebKit 内核的浏览器中被支持，所以在代码中需要添加 -webkit-box 前缀以兼容 WebKit 内核的浏览器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f5314cf6b2d6eab3de0e9c