[CSS] 자동 말줄임 기능 적용하기 - 문장 말줄임

화면 박스내에 문자가 길어질때 자동으로 말줄임 표시를 넣는 방법을 간단히 정리해 본다.

 

한줄 문장형태로 말줄이기

 

.gul {
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
 
 

 

여러줄로 나타나는 텍스트 문장에서 말줄이기

.gul {
width:200px;
 
/*여러줄로 나타내기*/
white-space:normal;
display:-webkit-box;
-webkit-line-clamp:3; /*3줄로*/
-webkit-box-orient:vertical;
overflow:hidden;
}

 

 

참고 : https://webruden.tistory.com/655