CSS로 간단하게 ellipsis('...') 처리하는 방법

한줄라인 글자수 제한

- HTML

<div class="txtBox">
	안녕하세요. CSS에서 ellipsis("...")를 처리하는 방법 입니다.
 </div>

- CSS

.txtBox { 
	width:150px; 
	padding:0 5px; 
	overflow:hidden;
	text-overflow:ellipsis; 
	white-space:nowrap; 
}

 

멀티라인 글자수 제한

-HTML

<div class="txtBox">
    안녕하세요. CSS에서 ellipsis("...")를 처리하는 방법 입니다.
    안녕하세요. CSS에서 ellipsis("...")를 처리하는 방법 입니다.
    안녕하세요. CSS에서 ellipsis("...")를 처리하는 방법 입니다.
    안녕하세요. CSS에서 ellipsis("...")를 처리하는 방법 입니다.
    안녕하세요. CSS에서 ellipsis("...")를 처리하는 방법 입니다.
    안녕하세요. CSS에서 ellipsis("...")를 처리하는 방법 입니다.
    안녕하세요. CSS에서 ellipsis("...")를 처리하는 방법 입니다.
    안녕하세요. CSS에서 ellipsis("...")를 처리하는 방법 입니다.
    안녕하세요. CSS에서 ellipsis("...")를 처리하는 방법 입니다.
  </div>

- CSS

.txtBox { 
	width: 200px;
	overflow: hidden; 
	text-overflow: ellipsis; 
	display: -webkit-box; 
	-webkit-line-clamp: 3; /* 라인수 */ 
	-webkit-box-orient: vertical; 
	word-wrap:break-word; 
	line-height: 1.2em; 
	height: 3.6em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */
}