내용이 박스 밖으로 벗어났을 때 처리 방법 - overflow
overflow
overflow 속성은 white-space: norwap;으로 지정해 줄바꿈을 하지
않을 때는 텍스트가 기준선을 벗어나 넘칠 수도 있습니다 이렇게 박스의 크기
밖으로 넘치는 내용을 어떻게 처리할지 정하는 속성이 입니다.
기본형
overflow : visible | hidden | scroll | auto- visible : 박스를 넘어가도 보여줍니다.
- hidden : 박스를 넘어간 부분은 보이지 않습니다.
- scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다.
auto : 박스를 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈
때에는 스크롤바가 나옵니다.
예제
data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="590"
data-pen-title="CSS 내용이 박스 밖으로 벗어났을 때 처리 방법 overflow"
data-slug-hash="yLJJBgN"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 590px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.