[CSS] 말줄임(...) 표시하기

텍스트 말줄임 표시하기

 

 

1. HTML

<strong>가나다라마바사아자차카타파하 가나다라마바사아자차카타파하 가나다라마바사아자차카타파하</strong>

 

2. CSS

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

text-overflow :ellipsis

텍스트가 컨테이너 넘어갈 때 말줄임표 표시 지정

728x90

 

display: -webkit-box;

줄 수 및 상자방향 제어

-webkit-line-clamp: 2;

표시할 줄의 수 : 2개로 지정

-webkit-box-orient: vertical;

상자가 수직으로 쌓임

overflow: hidden;

지정된 줄 수 이상의 내용 숨김처리

 

 

** -webkit-

WebKit 기반 브라우저 (크롬, 사파리 등)에 특정한 것