[CSS] '...' 처리하는 방법 (text-overflow : ellipsis)

📋 text-overflow

text-overflow 란 박스 안에 내용이 넘칠 때 텍스트를 어떻게 처리할지 지정하는 속성입니다.

---

text-overflow 속성은 아래 두가지를 모두 충족할 경우에만 적용됩니다.

1. overflow 속성값이 hidden, scroll, auto 일때 (visible 제외)
2. white-space: nowrap

---

✔ '...' 처리하는 방법

[HTML]

<div class="text">텍스트 내용이 박스를 넘어가게 될때 ...을 사용하는 방법입니다.</div>

[CSS]

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

• overflow: hidden : 넓이가 100px을 넘어가는 내용에 대해서 보이지 않게 처리
• text-overflow: ellipsis : 글자가 넓이 100px을 넘어갈 경우 ...부호를 표시
• white-space: nowrap : 줄바꿈 하지 않고 한줄로 나오게 처리

---