css显示两行超出部分省略号

在CSS中，要显示超出部分并添加省略号，可以使用`text-overflow`属性和`white-space`属性来实现。

1. 先设置一个固定宽度的容器，用于显示文本。

```css

.container {

width: 200px; /* 设置容器宽度 */

white-space: nowrap; /* 设置文本不换行 */

overflow: hidden; /* 隐藏超出容器的文本 */

text-overflow: ellipsis; /* 显示省略号 */

}

```

2. 然后将文本放入容器中。

```html

Lorem ipsum dolor sit amet

consectetur adipiscing elit. Nullam maximus felis at congue sollicitudin.

```

在这个例子中，容器的宽度为200px，如果文本超出容器宽度，将隐藏超出的部分并添加省略号。

如果你想显示两行超出部分并添加省略号，可以使用`-webkit-box`和`-webkit-line-clamp`属性结合。

```css

.container {

display: -webkit-box; /* 使用弹性盒子布局 */

-webkit-box-orient: vertical; /* 垂直方向布局 */

-webkit-line-clamp: 2; /* 显示的行数 */

max-height: 2.4em; /* 显示的高度 */

width: 200px; /* 设置容器宽度 */

overflow: hidden; /* 隐藏超出容器的文本 */

text-overflow: ellipsis; /* 显示省略号 */

}

```

这里的`-webkit-line-clamp`属性限制了显示的行数为2，`max-height`属性限制了显示的高度，当超出部分隐藏后，添加省略号。

```html

Lorem ipsum dolor sit amet

consectetur adipiscing elit. Nullam maximus felis at congue sollicitudin.

```

当文本超出2行时，将隐藏超出部分并添加省略号。