使用 CSS 实现文本溢出省略号显示

使用 CSS 实现文本溢出省略号显示

要使用 CSS 实现文本溢出时显示省略号，可以通过以下几种方法来实现：

1. 单行文本溢出

对于单行文本溢出显示省略号，可以使用以下 CSS 属性：

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px; /* 设置元素宽度 */
  border: 1px solid #ccc; /* 可选，用于展示边框 */
}

示例 HTML：

<div class="ellipsis">
  这是一个示例文本，用于展示如何使用 CSS 实现文本溢出时显示省略号。
</div>

2. 多行文本溢出

对于多行文本溢出显示省略号，可以使用以下 CSS 属性：

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px; /* 设置元素宽度 */
  border: 1px solid #ccc; /* 可选，用于展示边框 */

  line-clamp: 3;
  -webkit-line-clamp: 3; /* 设置显示的行数 */
  line-height: 20px; /* 设置行高 */
  height: 60px; /* 根据行高和行数设置容器高度 */
}

示例 HTML：

<div class="multiline-ellipsis">
  这是一个示例文本，用于展示如何使用 CSS
  实现多行文本溢出时显示省略号。这是一个示例文本，用于展示如何使用 CSS
  实现多行文本溢出时显示省略号。这是一个示例文本，用于展示如何使用 CSS
  实现多行文本溢出时显示省略号。
</div>

3. 使用 Flexbox 实现文本溢出

如果你的布局是基于 Flexbox 的，你也可以结合 text-overflow: ellipsis 属性实现文本溢出显示省略号。

.flex-ellipsis-container {
  display: flex;
  width: 200px; /* 设置容器宽度 */
}

.flex-ellipsis {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ccc; /* 可选，用于展示边框 */
}

示例 HTML：

<div class="flex-ellipsis-container">
  <div class="flex-ellipsis">
    这是一个示例文本，用于展示如何使用 CSS 实现文本溢出时显示省略号。
  </div>
</div>

以上方法可以帮助你在不同场景下实现文本溢出时显示省略号。单行文本溢出使用 white-space: nowrap;、overflow: hidden; 和 text-overflow: ellipsis;，而多行文本溢出则需要结合 -webkit-line-clamp 和 -webkit-box 属性。根据具体的布局需求，还可以结合 Flexbox 等布局方式来实现。