面试官：如何实现单行／多行文本溢出的省略样式？

[linwu-hi]

面试官：如何实现单行／多行文本溢出的省略样式？

实现单行或多行文本溢出时的省略样式是前端开发中常见的需求。CSS提供了text-overflow属性来实现单行文本溢出的省略样式，同时结合white-space和overflow属性，可以实现多行文本溢出的省略样式。

单行文本溢出省略样式

实现单行文本的省略样式需要用到以下三个属性：

1. white-space: 用于控制元素内文本的换行方式。
2. overflow: 用于控制元素内容溢出时的处理方式。
3. text-overflow: 用于控制文本溢出时的省略样式。

.single-line-ellipsis {
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden; /* 内容溢出时隐藏超出部分 */
  text-overflow: ellipsis; /* 溢出部分用省略号代替 */
}

在上面的例子中，我们创建了一个类名为.single-line-ellipsis的样式。设置white-space属性为nowrap，表示文本不进行换行。设置overflow属性为hidden，当文本内容超出容器时，隐藏超出部分。最后，设置text-overflow属性为ellipsis，表示溢出部分用省略号（...）代替。

多行文本溢出省略样式

实现多行文本的省略样式需要用到以下三个属性：

1. display: 用于控制元素的显示方式，必须设置为-webkit-box或-webkit-inline-box，使得-webkit-line-clamp属性生效。
2. -webkit-box-orient: 用于设置元素内部的排列方向，值为vertical表示垂直排列。
3. -webkit-line-clamp: 用于设置显示的行数，超出行数的文本将被省略。

.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 显示的行数 */
  overflow: hidden; /* 内容溢出时隐藏超出部分 */
}

在上面的例子中，我们创建了一个类名为.multi-line-ellipsis的样式。通过设置display为-webkit-box，并将-webkit-box-orient设置为vertical，实现多行文本的垂直排列。然后，设置-webkit-line-clamp为希望显示的行数（例如3），超出的文本将被省略。最后，设置overflow属性为hidden，当文本内容超出容器时，隐藏超出部分。

需要注意的是，-webkit-line-clamp是一个私有属性，目前主要用于WebKit浏览器（例如Safari和Chrome）。在其他浏览器中可能不被支持。因此，在使用多行省略样式时，建议考虑使用JavaScript等其他方案实现跨浏览器的兼容性。