css文字省略

在网页设计中，我们经常会遇到文本内容超出容器宽度的情况，为了保持页面美观和用户体验，我们需要对溢出的文本进行适当的处理，本文将详细介绍CSS文字省略（ellipsis）的使用方法，帮助大家解决文本溢出的问题。

CSS文字省略的原理

CSS文字省略是通过设置元素的宽度和溢出文本的处理方式来实现，当文本内容超出元素宽度时，可以使用省略号（...）来表示省略的部分，以下是实现文字省略的三个关键属性：

1、white-space: 设置元素内的空白字符处理方式。

2、overflow: 设置当内容溢出元素框时如何处理。

3、text-overflow: 设置当文本溢出时如何显示。

下面我们就来具体看看如何操作：

单行文本省略

单行文本省略是最常见的情况，通常用于标题、列表等场景。

1、为需要省略文本的元素设置宽度：

.width-limit {
  width: 200px; /* 设置宽度为200px */
}

css文字省略

2、设置元素的white-space、overflow和text-overflow属性：

.width-limit {
  width: 200px;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
}

这样，当文本内容超出200px宽度时，就会显示省略号。

多行文本省略

我们可能需要对多行文本进行省略，不过需要注意的是，多行文本省略目前只支持部分浏览器。

1、设置元素的宽度、高度以及overflow属性：

.multi-line {
  width: 200px;
  height: 40px; /* 设置高度，根据行高计算 */
  overflow: hidden;
}

2、使用-webkit-line-clamp属性设置显示的行数：

.multi-line {
  width: 200px;
  height: 40px;
  overflow: hidden;
  display: -webkit-box; /* 使用旧版flex布局 */
  -webkit-box-orient: vertical; /* 设置垂直排列 */
  -webkit-line-clamp: 2; /* 显示两行文本 */
}

css文字省略

3、设置text-overflow属性：

.multi-line {
  width: 200px;
  height: 40px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}

这样，当文本内容超出两行时，就会显示省略号。