CSS 设计显示字体数量，剩余使用省略号 (...)

CSS 设计显示字体数量，剩余使用省略号 (...)

在网页设计中，我们经常需要限制文本显示的长度，比如在展示文章标题、商品名称、用户昵称等内容时。当文本超出预设长度时，我们可以使用省略号 (...) 来代替剩余的文字，以避免页面布局混乱。

以下是一些常用的 CSS 代码，用于实现文本截断并显示省略号：

1. 使用 text-overflow: ellipsis 和 overflow: hidden

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

该方法将文本设置为不换行 (white-space: nowrap)，并隐藏超出容器范围的文字 (overflow: hidden)。然后使用 text-overflow: ellipsis 在文本末尾添加省略号。

2. 使用 text-overflow: ellipsis 和 width 属性

.text-ellipsis {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

该方法设置了文本容器的宽度 (width: 100px)，并使用 overflow: hidden 和 text-overflow: ellipsis 来实现文本截断和省略号显示。

3. 使用 display: -webkit-box 和 -webkit-line-clamp

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

该方法使用 -webkit-box 属性将文本容器设置为弹性盒子，并使用 -webkit-line-clamp 属性限制显示的行数 (2 行)。同时使用 overflow: hidden 隐藏超出容器范围的文字。

注意：

• 以上方法适用于大部分浏览器，但可能存在兼容性问题，建议使用 text-overflow: ellipsis 方法，因为它具有更好的兼容性。
• 为了使省略号在不同浏览器中显示正常，请确保容器的宽度是固定的，或者使用 min-width 或 max-width 属性设置最小或最大宽度。
• -webkit-line-clamp 属性目前只支持 WebKit 内核浏览器，例如 Safari 和 Chrome。

通过以上方法，我们可以轻松地在 CSS 中实现文本截断并显示省略号，从而使页面布局更加美观整洁。