CSS
과다

통사론

• 오버 플로우 : 보이는 | 숨겨진 | 스크롤 | 자동 | 초기 | 상속하다;

매개 변수

비고

오버플로 : 스크롤

HTML

<div>
    This div is too small to display its contents to display the effects of the overflow property.
</div>

CSS

div {
    width:100px;
    height:100px;
    overflow:scroll;
}

결과

위의 콘텐츠는 100x100 픽셀 크기로 잘려서 넘쳐 흐르는 콘텐츠를 볼 수 있습니다.

대부분의 데스크탑 브라우저는 내용이 잘리는 지 여부에 관계없이 가로 스크롤 막대와 세로 스크롤 막대를 모두 표시합니다. 이렇게하면 동적 환경에서 스크롤 막대가 나타나고 사라지는 문제를 피할 수 있습니다. 프린터가 넘쳐 흐르는 내용을 인쇄 할 수 있습니다.

오버 플로우 랩

overflow-wrap 은 브라우저에 대상 요소 안의 텍스트 줄을 깨지지 않는 여러 줄로 나눌 수 있다고 알려줍니다. 컨테이너의 오버 플로우로 인해 레이아웃 문제가 발생하는 긴 문자열의 텍스트를 방지하는 데 유용합니다.

CSS

div {
    width:100px;
    outline: 1px dashed #bbb;
}

#div1 {
    overflow-wrap:normal;
}

#div2 {
    overflow-wrap:break-word;
}

HTML

<div id="div1">
      <strong>#div1</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> is too long so it will overflow past the edge of the line-break
</div>

<div id="div2">
      <strong>#div2</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> will be split at the line break and continue on the next line.
</div>

오버 플로우 : 보이는

HTML

<div>
     Even if this div is too small to display its contents, the content is not clipped.
</div>

CSS

div {
     width:50px;
     height:50px;
     overflow:visible;
}

결과

내용이 잘리지 않고 내용이 컨테이너 크기를 초과하면 내용 상자 외부로 렌더링됩니다.

오버플로로 생성 된 블록 서식 지정 컨텍스트

visible 과 다른 값으로 overflow 속성을 사용하면 새로운 블록 형식화 컨텍스트 가 작성 됩니다 . 이는 부유 요소 옆에있는 블록 요소를 정렬 할 때 유용합니다.

CSS

img {
    float:left;
    margin-right: 10px;
}
 div {
     overflow:hidden; /* creates block formatting context */
}

HTML

<img src="http://placehold.it/100x100">
<div>
  <p>Lorem ipsum dolor sit amet, cum no paulo mollis pertinacia.</p>
  <p>Ad case omnis nam, mutat deseruisse persequeris eos ad, in tollit debitis sea.</p>
</div>

결과

이 예제는 overflow 속성이 설정된 div 내의 단락이 플로팅 된 이미지와 상호 작용하는 방법을 보여줍니다.

overflow-x 및 overflow-y

이 두 속성은 overflow 속성과 비슷한 방식으로 작동하며 같은 값을 허용합니다. overflow-x 매개 변수는 x 또는 왼쪽에서 오른쪽 방향 축에서만 작동합니다. overflow-y 는 y 또는 위 - 아래 축에서 작동합니다.

HTML

<div id="div-x">
    If this div is too small to display its contents, 
    the content to the left and right will be clipped.
</div>

<div id="div-y">
    If this div is too small to display its contents, 
    the content to the top and bottom will be clipped.
</div>

CSS

div {
    width: 200px;
    height: 200px;
}

#div-x {
    overflow-x: hidden;
}

#div-y {
    overflow-y: hidden;
}