美文网首页
css3实现0.5px细线;div内显示1行/2行/3行,超出部

css3实现0.5px细线;div内显示1行/2行/3行,超出部

作者: 冰雪_666 | 来源:发表于2020-01-16 09:43 被阅读0次

1.css3实现0.5px细线

.line{
    position: relative;
}
.line:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: #f00;
    transform: scaleY(.5);
    -webkit-transform: scaleY(.5);
}

一、div内显示一行,超出部分用省略号显示

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

二、div内显示两行或三行,超出部分用省略号显示

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;(行数)
    -webkit-box-orient: vertical;

相关文章

网友评论

      本文标题:css3实现0.5px细线;div内显示1行/2行/3行,超出部

      本文链接:https://www.haomeiwen.com/subject/xuffzctx.html