css 多行文字多余部分隐藏

CSS 多行文字多余部分隐藏 在开发网页时，经常会遇到长文本需要显示的情况，但当长文本超出容器边界的时候，会显得很不美观。这时候需要用到 CSS 多行文字多余部分隐藏的技巧。 我们可以通过使用 CSS 属性 `text-overflow` 实现多行文字多余部分的隐藏。该属性通常和 `white-space` 和 `overflow` 属性一起使用。具体使用方法如下： ```html

  Lorem ipsum dolor sit amet,consectetur adipiscing elit. Duis laoreet ultrices ligula eu tempus. Duis pretium rhoncus augue sed lacinia.

``` ```css .multiline-ellipsis { display: -webkit-Box; -webkit-line-clamp: 3; /* 显示 3 行文字 */ -webkit-Box-orient: vertical; overflow: hidden; text-overflow: ellipsis; /* 多余部分显示省略号 */ } ``` 上面的 CSS 样式会将 `.multiline-ellipsis` 元素的文本内容限制在 3 行以内，并在第三行结尾处显示省略号。 需要注意的是，该技巧使用前需要对不同浏览器做出兼容，因为不同浏览器对应的属性名可能不同。 综上所述，使用 CSS 多行文字多余部分隐藏技巧，可以让网页在显示长文本时更加美观。