🔔 Overflow

보통 박스의 크기가 일정한 값으로 지정되지 않은 상태에서는,
안에 들어있는 콘텐츠의 크기에 따라 늘어납니다.
그런데 박스의 크기를 일정값으로 고정하고서 매우 긴 텍스트를 콘텐츠로 넣어주면 어떻게 될까요?
텍스트의 양이 너무 많아 박스 크기를 초과하면, 콘텐츠가 박스 밖으로 넘쳐 나와버립니다.

위처럼요...
보기에 좋지 않죠.

이렇게 내용물이 너무 커서 컨테이너 밖으로 빠져 나오는걸 overflow 라고 합니다.
overflow 속성은 요소에 이 현상이 일어났을 때 어떻게 대처할 지 선택하도록 합니다.

---

overflow 속성에 사용 가능한 값은 다음과 같습니다.

• visible: 기본값, overflow 된 콘텐츠를 그대로 보여줌
• hidden: overflow 된 콘텐츠를 숨김

• scroll: 스크롤 바를 만들어 overflow 된 내용을 볼 수 있게 해줌
  • x, y축 전부에 스크롤 바를 만듦
  • y축에만 만들고 싶다면 overflow-y: scroll 로 지정해야 함
  • 콘텐츠 내용이 overflow 되지 않았어도 스크롤 바는 여전히 보임

양 축에 전부 스크롤 바가 나타나는 이유는, 사실 overflow 가 overflow-x 와 overflow-y 를 한 번에 지정하기 위해 사용하는 단축 속성이기 때문입니다.

그래서 한 축에만 스크롤 바를 만들기 위해서는 overflow-y: scroll 을 하거나,
overflow: hidden scroll 을 해야합니다.

---

• auto: 스크롤 바 표시 여부를 브라우저가 결정함
  • overflow 되지 않으면 스크롤 바를 만들지 않음

콘텐츠가 넘치면 y축 스크롤 바가 나타나고,

콘텐츠가 작아지면 스크롤 바가 보이지 않습니다.

✅ y축에만 스크롤 바가 나타나는 이유는 
"auto" 가 overflow 가 일어나는 방향에만 스크롤 바를 생성하기 때문입니다.

텍스트의 경우 자동으로 줄 바꿈이 일어나 y축 방향으로 길어지기 때문에,
y축으로만 overflow 가 일어났습니다.

하지만 다른 경우 두 방향으로의 overflow 가 모두 일어날 수 있습니다.
이 때 한 축 만 scroll 하고 한 축은 hidden 으로 설정하면
hidden 으로 설정된 방향으로 overflow 된 콘텐츠는 보이지 않습니다.

---

auto 는 콘텐츠가 동적으로 늘어나거나 줄어드는 상황에 유연하게 대처할 수 있으므로 가장 잘 사용됩니다.
하지만 상황에 따라 컨테이너 내부 영역의 크기가 변한다는 단점이 있습니다.

❗ 스크롤 바의 크기만큼 컨텐츠 영역이 줄어들었다가, 스크롤 바가 사라지면 다시 커짐
내부 레이아웃이 상황에 따라 변화됨

---

값을 hidden, scroll, auto 로 설정하는 건 그 요소를 scroll container 로 만듭니다.
그럼 알아본 바와 같이 자식 요소가 overflow 되지 않게 되죠.

overflow: clip

clip 은 새로 나온 속성값으로, hidden 과 비슷하게 동작하지만
scroll container 를 만들지 않습니다.

그래서 tab 키나 scrollTo() 같은 방법으로 overflow 된 콘텐츠를
스크롤하여 보는 것이 불가능합니다.

line-wrap 제어로 x축 overflow 하기

콘텐츠는 자동으로 줄바꿈(line wrapping)을 하여 컨테이너의 너비를 넘지 않도록 하는데,
그렇기 때문에 보통 y축으로 overflow 는 일어나도 x축 overflow 는 일어나지 않죠.

자동 줄바꿈이 일어나지 않도록 하여 x축으로 overflow 되도록 해봅시다.

• white-space: nowrap
• text-wrap: nowrap

위 속성을 사용하면 자동 줄바꿈을 방지합니다.

좀 더 알아보기
white-space | MDN
text-wrap | MDN