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

如何用 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;  }
登录后复制

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

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容