text-overflow

ext-overflow는 CSS에서 텍스트가 요소의 영역을 넘칠 때 그 텍스트를 어떻게 처리할지를 정하는 속성이에요. 주로 overflow: hidden 및 white-space: nowrap과 함께 사용됩니다.

---

📌 text-overflow 주요 속성값

속성값설명

clip	넘치는 텍스트를 그냥 자릅니다. (기본값)
ellipsis	넘치는 텍스트 끝에 …(말줄임표)를 표시합니다.
string	말줄임 대신 사용자가 지정한 문자열로 대체할 수 있습니다. (일부 브라우저에서 지원)

<div class="ellipsis-text" style="width: 150px;">
  이 텍스트는 너무 길어서 한 줄에 다 못 들어갑니다.
</div>

.ellipsis-text {
  white-space: nowrap;       /* 텍스트 줄바꿈 안 함 */
  overflow: hidden;          /* 넘친 텍스트 숨김 */
  text-overflow: ellipsis;   /* 넘치면 말줄임표로 표시 */
}

결과: 이 텍스트는 너무 길어서…

 

💡 참고사항

• text-overflow는 블록 또는 인라인 블록 요소에만 적용돼요.
• ellipsis가 동작하려면 반드시 white-space: nowrap과 overflow: hidden이 같이 있어야 해요.

📌 왜 인라인 요소에 적용되지 않을까?

text-overflow는 요소 내부의 콘텐츠가 "박스"를 넘칠 때 동작해요. 하지만 인라인 요소(예: <span>)는 기본적으로 콘텐츠 크기만큼만 넓이를 가지기 때문에, 넘친다는 개념 자체가 성립되지 않아요.

 

✅ 적용 가능하게 하려면?

인라인 요소에 text-overflow를 적용하려면 다음과 같이 스타일을 바꿔줘야 해요:

 

<span class="inline-ellipsis">이 텍스트는 너무 길어서 말줄임 처리가 필요합니다.</span>

.inline-ellipsis {
  display: inline-block;     /* 인라인에서 인라인 블록으로 변경 */
  white-space: nowrap;       /* 줄바꿈 방지 */
  overflow: hidden;          /* 넘친 내용 숨김 */
  text-overflow: ellipsis;   /* 말줄임표 표시 */
  width: 100px;              /* 고정 너비 설정 */
}

 

 

✅ 핵심 포인트 정리

• text-overflow는 overflow가 발생하는 요소에만 적용됨
• 인라인 요소는 기본적으로 overflow가 없음
• 적용하려면 display: inline-block이나 block으로 바꾸고 width를 지정해야 함