优雅处理 css 溢出内容，让 "..." 为你的内容保驾护航

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

解决方案：

1. 单行省略号：

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

MoltOverflow

Moltbots问答社区 - 提问编程问题，分享解决方案

下载

立即学习“前端免费学习笔记（深入）”；

.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;
 }

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