CSS Layout - Overflow

CSS overflow속성은 너무 커서 영역에 맞지 않는 내용의 내용을 제어합니다.

#overflowTest {
  background: #4CAF50;
  color: white;
  padding: 15px;
  width: 50%;
  height: 100px;
  overflow: scroll;
  border: 1px solid #ccc;
}

This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

 

CSS overflow

이 overflow속성은 요소의 내용이 너무 커서 지정된 영역에 맞지 않을 때 내용을자를 것인지 스크롤 막대를 추가 할 것인지를 지정합니다.

이 overflow속성의 값은 다음과 같습니다.

• visible- 기본. 오버 플로우가 잘리지 않습니다. 내용은 요소 상자 외부에서 렌더링됩니다.
• hidden -오버플로가 잘리고 나머지 내용은 보이지 않습니다.
• scroll -오버플로가 잘리고 스크롤 막대가 추가되어 나머지 내용을 볼 수 있습니다.
• auto-와 비슷 scroll하지만 필요할 때만 스크롤 막대를 추가합니다.

참고 : 이 overflow속성은 지정된 높이를 가진 블록 요소에만 작동합니다.

참고 : OS X Lion (Mac)에서는 스크롤 막대가 기본적으로 숨겨져 있으며 "overflow : scroll"이 설정되어 있어도 사용할 때만 표시됩니다.

 

overflow: visible

기본적으로 overflow는입니다 visible. 즉, 잘리지 않고 요소 상자 외부에서 렌더링됩니다.

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

 

overflow: hidden

hidden값, 오버 플로우가 잘리고, 콘텐츠의 나머지는 숨겨져 있습니다 :

div {
  overflow: hidden;
}

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

 

overflow: scroll

값을로 설정하면 scroll오버플로가 잘리고 스크롤 막대가 추가되어 상자 내부를 스크롤합니다. 스크롤 막대를 가로 및 세로로 추가 할 수 있습니다 (필요하지 않은 경우에도).

div {
  overflow: scroll;
}

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

 

overflow: auto

auto값과 유사 scroll하지만, 필요한 경우에만 스크롤바를 추가합니다 :

div {
  overflow: auto;
}

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

 

overflow-x 및 overflow-y

overflow-x및 overflow-y(또는 둘 다) 단지 수평 또는 수직 콘텐츠 플로우를 변경할 것인지 속성 지정

overflow-x내용의 왼쪽 / 오른쪽 가장자리로 수행 할 작업을 지정합니다.
overflow-y내용의 위쪽 / 아래쪽 가장자리로 수행 할 작업을 지정합니다.

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.