在css怎么写多行文本超出省略

在 CSS 中实现多行文本超出省略的效果相对复杂一些，需要结合`display`、`-webkit-line-clamp`和`-webkit-box-orient`等属性来实现。

下面是一个示例代码：

.container {
  display: -webkit-box; /* 将容器设置为弹性盒子 */
  -webkit-box-orient: vertical; /* 设置盒子的排列方向为垂直方向 */
  overflow: hidden; /* 超出部分隐藏 */
  -webkit-line-clamp: 3; /* 显示的行数 */
  text-overflow: ellipsis; /* 显示省略号 */
}

在上述代码中，`.container` 是包含多行文本的容器类名。通过将 `display` 属性设置为 `-webkit-box`，将容器设置为弹性盒子。通过设置 `-webkit-box-orient` 属性为 `vertical`，将盒子的排列方向设置为垂直方向。然后，使用 `-webkit-line-clamp` 属性指定显示的行数，这里示例中设置为3行。最后，使用 `text-overflow` 属性显示省略号来表示文本被省略。

请注意，上述代码中使用了 `-webkit-` 前缀，这是因为 `-webkit-line-clamp` 和 `-webkit-box-orient` 属性目前只在 WebKit 浏览器中有效，如 Chrome 和 Safari。其他浏览器可能需要使用其他方式来实现多行文本超出省略的效果。