[CSS] text-overflow 텍스트 긴 글 생략 기호로 표시

 

text-overflow

: 지정한 영역을 넘쳐 텍스트가 넘어갈 경우 어떻게 처리할 것인지 지정하는 속성

* 주의 ) 아래의 두가지 조건을 모두 충족할 경우에만 적용

 

 

1. overflow의 속성값이 hidden, scroll, auto 일 경우 (visible은 제외)

2. white-space:nowrap

3. width 또는 height가 고정적

 

 

 

속성값

clip | ellipsis | string | initial | inherit

clip : 기본값, 텍스트 자름

ellipsis : 잘린 텍스트를 … 기호로 표현 가능

string : 잘린 텍스트를 지정한 문자열로 표시

 

<div>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

div p {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap; 
  width: 100px;
  height: 20px;
}