纯css实现多行文字截断

单行文本折断

    div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
复制代码

多行文本折断

第一种：-webkit-line-clamp实现

    div {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
复制代码

第二种：利用定位元素实现多行文本折断

    p {
        position: relative;
        line-height: 18px;
        height: 36px;
        overflow: hidden;
    }

    p::after {
        content: "...";
        font-weight: bold;
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 1px 45px;

        background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
        background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
        background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
        background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
        background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    }
复制代码