Front-end/HTML&CSS

HTML&CSS) CSS 말 줄임 ...표시. 한줄 말줄임, 두줄 말줄임

luana_eun 2023. 9. 13. 17:06
728x90

어떤 칸에 글자가 너무 많은데 자리는 한정적일때 말 줄임을 쓰곤 한다. 

이 말줄임 표시를 해보자. 

 

 

네이버 메인화면에서 예시를 가져왔다. 광고아님!

스타일을 입혔더니 이렇게 한줄로 줄여진다. 

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

 

여기서 

-webkit-line-clamp 을 2로 하면 두 줄로 말줄임이 된다. 

 

728x90