CSS 设置省略号

1. 前言

省略号（ellipsis）是一种常用于文本溢出处理的技术。当文本内容超出其容器的宽度或高度时，可以使用省略号来显示被截断的部分，以表示内容的截断。在CSS中，有多种方式可以实现省略号的效果。本文将详细介绍CSS中设置省略号的方法及其应用场景。

2. 文本溢出的问题

在网页布局中，经常会遇到文本内容超出其容器的情况。这可能是因为容器的宽度或高度限制，或者文本内容过长。为了保持页面的美观和布局的完整性，通常需要对文本溢出进行处理。

下面是一个示例，展示了一个容器中的文本内容超过容器宽度的情况：

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

容器的样式如下：

.container {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  padding: 10px;
}

效果如下：

可以看到，文本超过容器的宽度，导致溢出，并没有提供任何指示或省略的内容。

3. text-overflow 属性

CSS的text-overflow属性用于处理文本溢出问题，包括设置省略号。它可以应用于带有固定宽度的容器，并且必须与overflow属性一同使用。

下面是text-overflow属性的语法：

text-overflow: clip|ellipsis|string|initial|inherit;

常用的属性值有：

• clip：默认值。不显示省略号，直接裁剪文本内容。
• ellipsis：显示省略号，表示文本被截断。
• string：可以通过在属性值中自定义一个字符串来表示省略号，比如"..."
• initial：将属性重置为默认值。
• inherit：继承父元素的属性值。

为了使text-overflow属性生效，还需要设置容器元素的overflow属性为hidden或scroll。

在前面的例子中，我们添加text-overflow属性来显示省略号：

.container {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  padding: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

效果如下：

可以看到，使用text-overflow属性后，溢出的文本以省略号形式显示，并指示了内容被截断。

4. white-space 属性

除了使用text-overflow属性外，还可以利用white-space属性来实现省略号的效果。white-space属性定义了如何处理元素中的空白符，包括空格、换行符等。

常用的属性值有：

• normal：默认值。合并连续的空白符，换行符会被当做空格处理。
• nowrap：不换行，合并连续的空白符。
• pre：保留空白符，但是不允许自动换行。
• pre-wrap：保留空白符，允许自动换行。
• pre-line：合并连续的空白符，允许自动换行。

在实现省略号的效果上，我们常常会将white-space属性与text-overflow属性一同使用。

下面是一个利用white-space属性实现省略号的示例：

.container {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  padding: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

效果如下：

可以看到，文本内容现在被截断，并以省略号形式显示。即使宽度增加或减小，文本仍然不会换行。

5. 多行文本省略号

以上的方法适用于单行文本的溢出处理，对于多行文本，我们需要另外的技术来实现省略号的效果。

5.1. 使用WebKit浏览器

WebKit浏览器（Chrome、Safari等）提供了一种特殊的CSS属性，可以用于多行文本的省略号。这个属性是-webkit-line-clamp，它可以限制一个块容器内的文本行数。

下面是一个使用-webkit-line-clamp实现多行文本省略号的示例：

<div class="container">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

容器的样式如下：

.container {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  padding: 10px;
  overflow: hidden;
}
.text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

效果如下：

可以看到，文本内容被截断为三行，并以省略号形式显示。

需要注意的是，-webkit-line-clamp只在WebKit浏览器中生效。

5.2. 使用伪元素

除了使用WebKit浏览器的专有属性，我们还可以使用伪元素来实现多行文本省略号。这种方法基于设置容器的高度和行高，利用伪元素生成省略号的效果。

下面是一个使用伪元素实现多行文本省略号的示例：

<div class="container">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

容器的样式如下：

.container {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  padding: 10px;
  position: relative;
  overflow: hidden;
}
.text {
  height: 100%;
  line-height: 1.5;
  position: relative;
}
.text::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background: white;
  padding-left: 2px;
}

效果如下：

可以看到，文本内容被截断，并以省略号形式显示。通过设置伪元素的背景色和内边距，使省略号显示更为清晰。

6. 总结

本文介绍了在CSS中设置省略号的方法。通过使用text-overflow属性，可以在单行文本中显示省略号。结合使用white-space属性，可以控制文本的换行和省略号的显示。对于多行文本，可以利用WebKit浏览器的 -webkit-line-clamp属性，或者使用伪元素来实现省略号的效果。