css两行省略号

 

在CSS中，可以使用text-overflow属性来实现文本的省略号效果。一般情况下，text-overflow只适用于单行文本，但是我们可以通过一些技巧将多行文本也实现省略号效果。下面是两种常用的方法：

 

方法一：使用单行省略号

 

1. 使用white-space属性将文本强制在一行显示：

 

```css

.el {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

```

 

上面代码中，我们将文本的white-space属性设置为nowrap，表示不换行。然后设置overflow属性为hidden，表示超出容器部分的文本被隐藏。*使用text-overflow属性设置省略号符号。

 

2. 设置容器的宽度：

 

一行省略号效果的实现需要限制容器的宽度，可以使用固定宽度或者百分比来控制，例如：

 

```html

```

 

```html

```

 

以上代码中，通过设置容器的宽度，将文本限制在一行。

 

方法二：使用多行省略号

 

1. 设置容器的高度：

 

对于多行文本，我们需要设置容器的高度，通过max-height属性来控制。例如：

 

```css

.el {

display: -webkit-box;

-webkit-box-orient: vertical;

text-overflow: ellipsis;

overflow: hidden;

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

max-height: 48px; /*单行高度乘以显示行数*/

}

```

 

以上代码中，通过设置容器的高度，并使用display属性设置为-webkit-box，-webkit-box-orient属性设置为vertical，即垂直方向展示文本。然后使用text-overflow属性设置省略号符号，overflow属性设置隐藏超出容器的部分。*通过-webkit-line-clamp属性设置最多显示的行数，max-height属性设置*容器高度。

 

2. 设置文字属性：

 

除了上面设置容器的高度之外，我们还可以设置文字的行高，字体大小等属性以改善省略号的效果。例如：

 

```css

.el {

line-height: 24px; /*行高和字体大小根据实际情况调整*/

font-size: 16px;

/*其他样式*/

}

```

 

以上代码中，通过设置line-height和font-size属性来调整行高和字体大小。

 

总结：

 

通过使用text-overflow属性可以实现CSS中的省略号效果。对于单行省略号，设置white-space属性为nowrap，overflow属性为hidden，text-overflow属性为ellipsis即可。对于多行省略号，设置max-height属性和-webkit-line-clamp属性来控制容器的高度和行数。此外，调整行高和字体大小等样式可以改善省略号的效果。