CSS. 말 줄이기!

한 줄 효과

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

 

두 줄 효과

.ellipsis2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}

 

세 줄 효과

.ellipsis3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}