当页面上的文本超出其容器的宽度时，通常希望能显示一个省略号（…）来提示用户文本已被裁剪。在CSS中，通过几个关键属性可以很容易地实现这一效果。

1. ellipsis 使用方法

  1. 设定一个容器宽度：确保文本容器有一个设定的宽度或最大宽度。
  2. 单行文本限制：要显示省略号，文本应保持在单行内。
  3. 隐藏超出的内容：通过设置overflow: hidden;来确保超出的内容不会显示。
  4. 使用text-overflow属性：设置为ellipsis，这样当文本超出容器宽度时会显示省略号。

示例代码：

<style>
    .ellipsis {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid #ccc;
    }
</style>

<div class="ellipsis">这是一段非常非常非常非常非常非常长的文本，但由于空间限制，我们只能显示部分内容。</div>

在上述例子中，长文本会被裁剪并在其末尾显示省略号。容器的宽度可以根据需要进行调整。

此方法为最常见的实现单行文本省略号的方式。如果有多行文本并希望在最后一行显示省略号，则需要使用更高级的技巧，例如CSS的line-clamp属性。

2. line-clamp 使用方法

要使用line-clamp，通常需要以下几个CSS属性配合：

  1. -webkit-line-clamp: 指定要显示的最大行数。
  2. display: 设置为-webkit-box或-webkit-flex。
  3. -webkit-box-orient: 设置为vertical。

示例

下面的代码限制文本为最多3行，并在文本超出时显示省略号：

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

<div class="clamped">
    这是一段长文本。它可能包含了多行内容，超出指定的行数后，将会被裁剪，并在末尾显示省略号。你可以增加或减少内容来查看效果。
</div>

浏览器兼容性

line-clamp最初是WebKit专有的，所以有-webkit-前缀。但现代浏览器，包括Chrome、Firefox和Safari，大多数都支持这个属性。但要确保它在你的目标浏览器中可用，建议使用工具如Can I use进行检查，并考虑使用浏览器前缀或其他回退方法。

注意事项

  • line-clamp仅适用于块元素。
  • 当使用line-clamp时，通常还需要配合overflow: hidden;来确保超出的内容被隐藏。
  • 由于line-clamp基于行数而不是具体的高度，所以它在不同的字体大小和行高设置下可能会有不同的效果。