CSS(一) 单行文本截断和多行文本截断

格展网络
156 浏览39 点赞
PB教程网,一个佛系PbootCMS教程博客,了解一下
CSS单行文本截断和多行文本截断的设置

单行文本截断

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

多行文本截断

p { 
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2; /* 行数 */
    -webkit-box-orient: vertical;
}

文本截断通用代码

/* 文本截断 */
.line-1{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}
.line-2,.line-3,.line-4{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.line-2{-webkit-line-clamp:2}
.line-3{-webkit-line-clamp:3}


本文由平台注册作者或者官方发布,未经许可,禁止转载!

本文网址:https://www.yingzia.com

本文来自:@格展网络 | 发布于 2020-06-17 09:46:48

原文来自:https://www.yingzia.com

点赞 | 39 浏览 | 156 分享