CSS 레이아웃
CSS overflow속성은 너무 커서 영역에 맞지 않는 콘텐츠를 제어합니다.
이 텍스트는 정말 길고 컨테이너의 높이는 100픽셀에 불과합니다. 따라서 독자가 콘텐츠를 스크롤할 수 있도록 스크롤 막대가 추가됩니다. 고통 그 자체가 사랑이다 그렇기 때문에 우리의 정상적인 관행이 결과를 이용하기 위해 참는 가장 작은 사람이 오는 것입니다. 올림픽 사무국의 고통이나 올림픽 사무국의 고통, 그는 그 결과에 성가시게 되고 싶거나 진실에 eu 면역 체계의 고통으로 고통받고 있다, 에로스 그리고 소비자, 그리고 zzril의 일반적인 증오. 10대들에게서 자유로워지는 자유시간은 선택의 여지가 없다 유형에는 고유한 명확성이 없습니다.
CSS 오버플로
이 overflow속성은 요소의 콘텐츠가 지정된 영역에 맞지 않을 때 콘텐츠를 자를지 또는 스크롤바를 추가할지 여부를 지정합니다.
overflow속성에는 다음 값이 있습니다 .
visible- 기본. 오버플로가 잘리지 않습니다. 콘텐츠는 요소 상자 외부에서 렌더링됩니다.hidden- 오버플로가 잘리고 나머지 내용은 보이지 않습니다.scroll- 오버플로가 잘리고 스크롤바가 추가되어 나머지 콘텐츠를 볼 수 있습니다.auto- 와 유사scroll하지만 필요할 때만 스크롤바를 추가합니다.
참고: 속성 은 overflow지정된 높이의 블록 요소에만 작동합니다.
참고: OS X Lion(Mac)에서 스크롤 막대는 기본적으로 숨겨져 있고 사용할 때만 표시됩니다("overflow:scroll"이 설정되어 있어도).
오버플로: 보이는
기본적으로 오버플로는 visible, 잘리지 않고 요소 상자 외부에서 렌더링됨을 의미합니다.
레이아웃을 더 잘 제어하려면 overflow 속성을 사용할 수 있습니다. overflow 속성은 콘텐츠가 요소의 상자를 넘으면 어떻게 되는지 지정합니다.
예시
div {
width: 200px;
height:
50px;
background-color: #eee;
overflow: visible;
}
오버플로: 숨김
값을 사용 hidden하면 오버플로가 잘리고 나머지 콘텐츠가 숨겨집니다.
레이아웃을 더 잘 제어하려면 overflow 속성을 사용할 수 있습니다. overflow 속성은 콘텐츠가 요소의 상자를 넘으면 어떻게 되는지 지정합니다.
예시
div {
overflow: hidden;
}
오버플로: 스크롤
값을 로 설정하면 scroll오버플로가 잘리고 스크롤 막대가 추가되어 상자 내부를 스크롤합니다. 이것은 스크롤바를 가로 및 세로로 추가합니다(필요하지 않더라도):
레이아웃을 더 잘 제어하려면 overflow 속성을 사용할 수 있습니다. overflow 속성은 콘텐츠가 요소의 상자를 넘으면 어떻게 되는지 지정합니다.
예시
div {
overflow: scroll;
}
오버플로: 자동
auto값은 와 비슷 하지만 scroll필요할 때만 스크롤 막대를 추가합니다.
레이아웃을 더 잘 제어하려면 overflow 속성을 사용할 수 있습니다. overflow 속성은 콘텐츠가 요소의 상자를 넘으면 어떻게 되는지 지정합니다.
예시
div {
overflow: auto;
}
오버플로 x 및 오버플로 y
overflow-x및 속성 은 overflow-y콘텐츠의 오버플로를 가로로 또는 세로로(또는 둘 다) 변경할지 여부를 지정합니다.
overflow-x콘텐츠의 왼쪽/오른쪽 가장자리로 수행할 작업을 지정합니다.
overflow-y콘텐츠의 위쪽/아래쪽 가장자리로 수행할 작업을 지정합니다.
레이아웃을 더 잘 제어하려면 overflow 속성을 사용할 수 있습니다. overflow 속성은 콘텐츠가 요소의 상자를 넘으면 어떻게 되는지 지정합니다.
예시
div {
overflow-x: hidden; /* Hide horizontal scrollbar
*/
overflow-y: scroll; /* Add vertical scrollbar */
}
모든 CSS 오버플로 속성
| Property | Description |
|---|---|
| overflow | Specifies what happens if content overflows an element's box |
| overflow-wrap | Specifies whether or not the browser can break lines with long words, if they overflow its container |
| overflow-x | Specifies what to do with the left/right edges of the content if it overflows the element's content area |
| overflow-y | Specifies what to do with the top/bottom edges of the content if it overflows the element's content area |