놓치기 쉬운 정보 저장

개념 : overflow CSS 약식 속성 은 요소의 오버플로에 대해 원하는 동작을 설정합니다 . 
즉, 요소의 내용이 블록 형식 컨텍스트 에 맞지 않을 때 양방향으로 설정합니다.

overflow : visible
콘텐츠는 잘리지 않으며 패딩 상자 외부에서 렌더링될 수 있습니다.

overflow : hidden
패딩 상자에 맞게 필요한 경우 콘텐츠가 잘립니다. 스크롤 막대가 제공되지 않으며 사용자가 스크롤할 수 있도록(예: 끌기 또는 스크롤 휠 사용) 지원이 허용되지 않습니다. 콘텐츠 는 프로그래밍 방식으로 스크롤될 수scrollLeft 있으므로(예: 또는 메서드 와 같은 속성 값을 설정하여 scrollTo()) 요소는 여전히 스크롤 컨테이너입니다.

overflow : clip
와 유사하게 hidden콘텐츠가 요소의 패딩 상자에 잘립니다. clip와 의 차이점 은 키워드가 프로그래밍 방식 스크롤을 포함한 모든 스크롤을 금지 hidden한다는 것 입니다. clip상자는 스크롤 컨테이너가 아니며 새 서식 컨텍스트를 시작하지 않습니다. 새 서식 컨텍스트를 시작하려면 를 사용하여 시작할 수 있습니다 display: flow-root.

overflow : scroll
패딩 상자에 맞게 필요한 경우 콘텐츠가 잘립니다. 브라우저는 콘텐츠가 실제로 잘렸는지 여부에 관계없이 항상 스크롤바를 표시하여 콘텐츠가 변경될 때 스크롤바가 나타나거나 사라지는 것을 방지합니다. 프린터는 여전히 넘치는 콘텐츠를 인쇄할 수 있습니다.

overflow : auto
사용자 에이전트 에 따라 다릅니다 . 내용이 패딩 상자 안에 맞는 경우 와 같아 보이지만 visible여전히 새 블록 서식 컨텍스트를 설정합니다. 콘텐츠가 넘칠 경우 데스크톱 브라우저는 스크롤바를 제공합니다.

overflow : overlay 더 이상 사용되지 않음
와 동일하게 작동 auto하지만 공간을 차지하는 대신 콘텐츠 위에 스크롤 막대가 그려집니다.

개념 : white-space CSS 속성은 요소 내부의 공백을 처리하는 방법을 설정합니다.

[속성]
- 공백이 축소 되는지 여부와 방법 .
- 소프트 랩 기회에서 줄이 줄 바꿈될 수 있는지 여부.

* 참고 : 단어 자체 를 분리하려면 overflow-wrap, word-break 또는 hyphens대신 사용하십시오.

white-space : normal
공백 시퀀스가 ​​축소 됩니다. 소스의 개행 문자는 다른 공백과 동일하게 처리됩니다. 
라인 상자를 채우는 데 필요한 만큼 라인이 끊어집니다.

white-space : nowrap
와 같이 공백을 축소normal 하지만 소스 내에서 줄 바꿈(텍스트 줄 바꿈)을 억제합니다.

white-space : pre
공백 시퀀스가 ​​유지됩니다. <br>줄은 소스와 요소 의 줄 바꿈 문자에서만 끊어집니다 .

white-space : pre-wrap
공백 시퀀스가 ​​유지됩니다. 줄 바꿈 문자에서 줄은 줄 바꿈되며 <br>줄 상자를 채우는 데 필요합니다.

white-space : pre-line
공백 시퀀스가 ​​축소 됩니다. 줄 바꿈 문자에서 줄은 줄 바꿈되며 <br>줄 상자를 채우는 데 필요합니다.

white-space : break-spaces
동작은 pre-wrap다음을 제외하고 의 동작과 동일합니다.
보존된 공백의 시퀀스는 줄 끝을 포함하여 항상 공간을 차지합니다.
공백 문자 사이를 포함하여 보존된 모든 공백 문자 뒤에 줄 바꿈 기회가 있습니다.
이러한 보존된 공간은 공간을 차지하고 매달리지 않으므로 상자의 고유 크기(최소 콘텐츠 크기 및 최대 콘텐츠 크기)에 영향을 줍니다.