overflow

overflow

지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다.

overflow 속성

• overflow : visible : 지정한 영역에 요소들을 보이게 합니다.
• overflow : hidden :지정한 영역에 넘쳐난 요소들을 안보이게 합니다.
• overflow : scroll :지정한 영역에 무조건 스크롤 바를 생기게 합니다.
• overflow : auto : 지정한 영역에 요소들이 넘치면 자동으로 스크롤 바가 생깁니다.
• overflow : inherit : overflow-x의 속성 값을 상위요소한테 상속받습니다.

overflow-x축 속성

• visible : 지정한 영역에 요소들을 보이게 합니다.
• hidden : 지정한 영역에 넘쳐난 요소들을 안보이게 합니다.
• scroll : 지정한 영역에 무조건 스크롤 바를 생기게 합니다.
• auto : 지정한 영역에 요소들이 넘치면 자동으로 스크롤 바가 생깁니다.
• inherit : overflow-x-x의 속성 값을 상위요소한테 상속받습니다.

overflow-y축 속성

• visible : 지정한 영역에 요소들을 보이게 합니다.
• hidden : 지정한 영역에 넘쳐난 요소들을 안보이게 합니다.
• scroll : 지정한 영역에 무조건 스크롤 바를 생기게 합니다.
• auto : 지정한 영역에 요소들이 넘치면 자동으로 스크롤 바가 생깁니다.

text-overflow

텍스트가 요소 상자를 넘어갈 때 텍스트가 잘리는 상황을 처리합니다. 주로 잘라내거나 줄임표 (...)를 표시하거나 사용자 정의 문자열을 표시 할 수 있습니다.

• clip : 문자열를 그대로 보여주는 기본값입니다.
• ellipsis : 문자열 끝부분을 "..."으로 설정합니다.
• string : 짤린 텍스트 영역을 string으로 설정합니다.

image 출처 : https://cdn.dribbble.com/users/103909/screenshots/2916925/exbp-5.png