[CSS] text-overflow란? clip,ellipsis,fade

text-overflow ?

 

text-overflow는 CSS 속성 중 하나로,

요소 내의 텍스트가 요소의 크기를 초과하는 경우에 어떻게 처리할지를 지정하는 속성이다.

주로 긴 텍스트를 가진 요소를 다룰 때 사용되며,

해당 요소의 텍스트가 너무 길어서 요소의 경계를 벗어나는 경우에 적용된다.

 

일반적으로, 요소의 가로 너비에 따라 텍스트가 줄 바꿈되거나 생략되어 표시된다.

그러나 text-overflow 속성을 사용하면 이러한 동작을 세부적으로 제어할 수 있다.

 

 

 

text-overflow 속성

 

1. clip : 텍스트를 요소의 경계에서 잘라내고, 잘린 텍스트를 표시하지 않습니다. 잘린 텍스트는 숨겨진다.

2. ellipsis : 텍스트를 요소의 경계에서 잘라내고, 잘린 텍스트의 끝에 "..." (말줄임표)를 추가하여 나타냅니다. 이 옵션은 주로 한 줄로 표시되는 요소에 사용된다.

3. fade : 텍스트가 요소의 경계에서 서서히 희미해지도록 페이드 아웃된다.  주로 다중 줄이 있는 요소에 사용된다.

 

이러한 text-overflow 속성은 반드시 다음의 조건을 충족해야 한다.

1. 요소의 overflow 속성이 hidden 또는 scroll로 설정되어야 한다.

2. 요소에 고정된 너비 또는 블록 레벨 요소의 경우, 요소의 가로 너비를 정확하게 지정해야 한다.

 

예를 들어, CSS 코드는 가로 너비가 200px인 요소에 긴 텍스트가 있는 경우,

텍스트를 잘라내고 말줄임표로 나타내는 예

.overflow-example {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

 

위의 예제에서는 white-space 속성을 nowrap으로 설정하여 텍스트가 한 줄로 유지되도록 한다.

overflow 속성을 hidden으로 설정하여 요소의 내용이 너비를 초과할 경우 숨기도록 한다.

마지막으로 text-overflow 속성을 ellipsis로 설정하여 잘린 텍스트 끝에 말줄임표를 추가한다.

 

이렇게 설정된 요소는 너비를 초과하는 텍스트가 있는 경우,

해당 요소의 가로 너비 내에서 텍스트를 잘라내고 말줄임표로 나타내게 된다.