3줄이상 글자 짜르기 및 ...표시

.line-clamp
{
    display            : block;
    display            : -webkit-box;
    -webkit-box-orient : vertical;
    position           : relative;

    line-height        : 1.2;
    overflow           : hidden;
    text-overflow      : ellipsis;
    padding            : 0 !important;
}
/* .line-clamp:after
{
    content    : '...';
    text-align : right;
    bottom     : 0;
    right      : 0;
    width      : 25%;
    display    : block;
    position   : absolute;
    height     : calc(1em * 1.2);
    background : linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
} */
@supports (-webkit-line-clamp: 1)
{
    .line-clamp:after
    {
        display : none !important;
    }
}

.line-clamp-3
{
    -webkit-line-clamp : 3;
    height             : calc(1em * 1.2 * 2.4);
}

 

#더쉽게 해결

overflow:hidden; text-overflow: ellipsis; word-wrap:break-word; line-height: 1.5em; height: 3.0em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;