[css] ellipsis로 multiple lines '...'처리

1줄일 경우 딱 4개만 정해주면된다.

width값;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

 

여러줄일경우

-display: -webkit-box;

-webkit-line-clamp: 3; //원하는 라인수

-webkit-box-orient:vertical

가 추가되고

 

만약

line-height값이 설정되어있다면

height은 line-height의 값의 *3배로 정해준다

.mainModule li .substance { 
    overflow: hidden;
    margin-top: 5px;
    font-size: 16px;
    color: #bfbfbf;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.2em;
    height: 3.6em;
}