본문으로 바로가기

글자 자르기(...으로 흘러넘치게 보이기)

category WEB/CSS 2017. 6. 7. 16:39

...으로 흘러넘치게 보이기


CSS
.target {
    /* 한 줄 자르기 */
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 여러 줄 자르기 추가 스타일 */
    white-space: normal;
    line-height: 1.2;
    height: 3.6em;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}



출처: http://webdir.tistory.com/483 [WEBDIR]