如何用 CSS 优雅地处理溢出内容并用 "…" 代替？

css 溢出内容，让 “…” 为你的内容保驾护航

溢出的内容常常会破坏网页的美观布局，尤其是当内容过长时。那么如何巧妙地处理溢出内容，巧用 “…” 隐藏多余部分，让页面既简洁又高效呢？

解决方案：

1. 单行省略号：

通过设置 overflow:hidden;、white-space:nowrap; 和 text-overflow:ellipsis; 等 css 属性，可以实现单行省略超出部分并显示省略号。如下所示：

.content {     overflow:hidden;     white-space:nowrap;     text-overflow:ellipsis;  }

2. 多行省略号：

对于多行溢出的情况，可以使用 display:-webkit-box;、 –webkit-box-orient:vertical;、 -webkit-line-clamp: 和 overflow:hidden; 属性，设置省略的行数并隐藏多余部分。代码如下：

.content {      display:-webkit-box;     -webkit-box-orient:vertical;     -webkit-line-clamp:2;/*设置超过为省略号的行数*/     overflow:hidden;     text-overflow:ellipsis;  }

这样，即可根据需要设置省略的行数，让 “…” 优雅地隐藏溢出的内容，使页面布局更加美观和实用。