Overflow

width, height를 갖는 박스 안에 텍스트나 내용이 넘쳐 흐를 경우에는 보기에도 안 좋고 내용이 잘려 보이기도 한다. 즉, 가시성이 떨어질 수 밖에 없다.

위 사진에서 보기와 같이 파란색 영역인 width, height를 제외하고도 훨씬 내용이 넘쳐버렸다. 이럴 때 조절하기 위해선 overflow 속성을 이용해보자.

.box {
  overflow: visible;
  /* visible | scroll | auto | hidden */
}

1. overflow: visible

별도의 설정 없이도 적용되는 기본 값으로써 예시와 마찬가지로 내용이 넘친다면 박스를 넘어서도 텍스트나 내용물이 벗어나게 된다.

2. overflow: scroll, overflow: auto

두가지가 큰 차이가 없기 때문에 같이 상술하도록 한다. 이 속성들을 이용하면 박스 안에 내용이 들어오고 넘쳐나는 부분은 스크롤을 사용하여 확인할 수 있다.

3. overflow: hidden

이 속성은 넘치는 내용은 박스 안에 들어오되, 스크롤마저 사용하지 못 한다. 즉, 존재는 하지만 사용자의 입장에선 보이지 않게 된다.