CSS 省略号的制作

在网页设计中，省略号是一种常见的文本截断效果，用于显示过长的文本，并以省略号形式表示文本的截断部分。本文将详细介绍如何使用 CSS 制作省略号效果，包括单行省略号和多行省略号。

1. 单行省略号

在单行省略号中，当文本超过容器的宽度时，会将超出的部分用省略号（…）表示。

1.1 text-overflow 属性

CSS 中的 text-overflow 属性用于控制文本溢出容器时的处理方式。其中，属性值 clip 表示裁剪文本，直接隐藏溢出部分；属性值 ellipsis 表示以省略号形式显示溢出的部分。

在配合 text-overflow 属性使用省略号效果时，还需设置以下两个属性：

white-space: nowrap;：表示文本不换行，保持在一行显示；
overflow: hidden;：表示溢出部分隐藏。

示例代码如下：

<style>
  .container {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<div class="container">
  This is a long text that will be truncated by ellipsis.
</div>

代码运行结果如下：

This is a long te…

1.2 修改省略号样式

可以通过伪元素 ::after 或插入元素实现自定义省略号样式。

1.2.1 伪元素 `::after`

伪元素 ::after 可以在目标元素内容的最后添加一个虚拟元素，并对该元素进行样式设置。

示例代码如下：

<style>
  .container {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .container::after {
    content: "...";
    color: red;
    font-weight: bold;
  }
</style>

<div class="container">
  This is a long text that will be truncated by custom ellipsis.
</div>

代码运行结果如下：

This is a long tex…

1.2.2 插入元素

除了使用伪元素 ::after，还可以通过插入元素进行省略号的自定义样式。

示例代码如下：

<style>
  .container {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
  }

  .ellipsis {
    position: absolute;
    right: 0;
    top: 0;
    background-color: white;
    padding-left: 5px;
  }
</style>

<div class="container">
  This is a long text that will be truncated by custom ellipsis.
  <span class="ellipsis">...</span>
</div>

代码运行结果如下：

This is a long text…

2. 多行省略号

对于多行文本，如果希望超出容器高度的部分以省略号形式显示，可以使用 display: -webkit-box; 结合 -webkit-line-clamp 属性来实现。

2.1 -webkit-line-clamp 属性

-webkit-line-clamp 是一个非标准的 CSS 属性，用于限制一个块级元素显示的文本行数。

注意：-webkit-line-clamp 属性只对 -webkit-box-orient: vertical; 和 -webkit-box-orient: horizontal; 生效。

示例代码如下：

<style>
  .container {
    width: 200px;
    height: 80px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
</style>

<div class="container">
  This is a long text that will be truncated by ellipsis if it exceeds three lines.
</div>

代码运行结果如下：

This is a long text that will be truncated by ellipsis…

3. 兼容性考虑

需要注意的是，不同浏览器对省略号效果的支持略有差异。比较好的做法是结合使用多种方式，以确保在各种浏览器中都能正常显示省略号效果。

以下是一种常见的兼容性解决方案：

<style>
  .container {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .container.multiple-line {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
</style>

<div class="container">This is a long text that will be truncated by ellipsis.</div>
<div class="container multiple-line">This is a long text that will be truncated by ellipsis if it exceeds three lines.</div>

这样做的效果是，首先会尝试使用 CSS 标准的省略号方式实现单行省略号效果。如果浏览器不支持 text-overflow: ellipsis; 属性，会回退到多行省略号方案。