
CSS 属性 `text-overflow` 用于设置文本溢出时的显示方式。默认情况下,当文本内容超出元素的宽度时,会被裁剪隐藏。如果文本溢出后,希望以省略号(...)来表示被隐藏的内容,则可以使用 `text-overflow: ellipsis;` 属性。
以下是一个示例:
```html
Lorem ipsum dolor sit amet
consectetur adipiscing elit. Sed sit amet diam et nisl cursus mattis. Proin at urna eget metus ultricies commodo. Nulla facilisi. Duis vulputate diam ac lorem ornare
sed fermentum mauris lobortis. Sed id purus efficitur
volutpat arcu eget
sollicitudin ante.
```
运行该代码,可以看到 `box` 元素只显示了两行文本内容,并且末尾以省略号(...)表示隐藏的内容。
这种方式适用于固定宽度的容器,但对于自适应宽度的容器,如果要实现动态显示指定行数后显示省略号,就需要使用一些额外的技巧。以下是一个使用 CSS 的 `::after` 伪元素结合 JavaScript 的方法:
```html
Lorem ipsum dolor sit amet
consectetur adipiscing elit. Sed sit amet diam et nisl cursus mattis. Proin at urna eget metus ultricies commodo. Nulla facilisi. Duis vulputate diam ac lorem ornare
sed fermentum mauris lobortis. Sed id purus efficitur
volutpat arcu eget
sollicitudin ante.
```
这段代码定义了一个 `box` 元素,其高度被限制在 2.4 行(每行高度为 `1.2em`)。通过 ::after 伪元素添加了省略号内容,配合背景渐变来制造省略号渐变效果。
当文本内容超过两行时,会以省略号表示。这种方法可以适应自适应宽度的容器,但在处理特殊字符和中英文混排时可能会有一些问题。
总结起来,以上是两种常见的处理显示两行后多余内容显示省略号的 CSS 方法。根据具体需求和场景,可以选择适合的方法来实现所需效果。