用CSS截断字符串的两种实用方法

使用CSS截断字符串是前端开发中常见的需求，下面详细讲解两种实用方法的攻略。

方法一：文本溢出省略号

步骤一：使用文本溢出属性

CSS中的文本溢出属性text-overflow可用于控制文本的省略形式。将此属性设置为ellipsis即可使文本以省略号结尾。

步骤二：设置强制换行

如果不将文本强制换行，则文本将会一直展示直到页面边缘，而不是截取多余的部分。因此，需要设置white-space属性为nowrap，并添加overflow:hidden以控制多出来的字符。

下面是一条示例：

p {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在上述示例中，将<p>元素的宽度设置为200像素，并且将white-space属性设置为nowrap，使得文本强制不进行换行；将overflow属性设置为hidden，以使得多出来的文本隐藏；将text-overflow属性设置为ellipsis，使得文本以省略号结尾。

方法二：使用伪元素结尾

步骤一：结尾通过伪元素添加

该方法通过给文本元素添加伪元素 :after ，并将内容设置为三个点，即实心圆，来表示文本截断。该伪元素可以通过使用position和right属性，使其与文本元素产生重叠，产生截断的效果。（如果要将省略号放在文本的左边，也可以使用:before伪元素）

步骤二：限制文本元素宽度

同样的，如果文本元素不设置宽度，那么省略号没有作用。限制宽度的方式有很多，可以设置一个容器元素为其设置宽度，也可以直接为文本元素设置。

下面是一条示例：

p {
  position: relative;
  width: 200px;
  padding-right: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

p::after {
  content: "...";
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 100%;
  background: white;
  text-align: center;
}

在上述示例中，将<p>元素的宽度设置为200像素，并为其添加padding-right，使得文本与省略号之间有一定的间隙。将overflow属性设置为hidden，以使得多出来的文本隐藏；将text-overflow属性设置为ellipsis，使得文本以省略号结尾；将white-space属性设置为nowrap，使得文本强制不进行换行，同时为<p>元素添加相对定位属性，让伪元素绝对定位，从而和文本产生重叠。最后，使用content属性为伪元素设置内容为三个点，使用position属性使得伪元素的位置与文本元素重叠，使用height属性和background属性使得伪元素的背景色与文本元素的背景色一致，使用text-align属性使得伪元素的文本垂直居中。