[CSS] overflow(overflow-x, overflow-y) 속성

 

 

 

 

overflow 속성은 요소의 내용이 길어서 지정된 콘텐츠 영역을 넘어가는 경우, 내용을 자르거나 스크롤을 추가하는 등의 제어를 위해 사용됩니다.

이 속성은  height 가 지정된 요소에서만 작동합니다.

 

overflow: visible;  /* 기본값, 내용이 길어도 잘리지 않고 지정된 영역 밖으로 표시됨 */
overflow: hidden;  /* 내용이 길면 지정된 영역 밖의 내용은 잘리고 표시되지 않음 */
overflow: scroll;  /* 내용을 보여주기 위해 스크롤바가 추가되며, 내용 길이에 관계없이 스크롤바가 항상 표시됨 */
overflow: auto;  /* 스크롤과 비슷하나 내용 길이에 따라 스크롤바 유무가 결정됨 */
overflow: initial;  /* 이 속성을 기본값으로 설정함 */
overflow: inherit;  /* 부모의 속성 값을 상속 받음 */

 

 overflow-x  속성은 내용이 길어지면 가로로 넘치는 내용을 자를지, 가로축 스크롤을 추가할지 등의 여부를 지정하고,

 overflow-y  속성은 내용이 길어지면 세로로 넘치는 내용을 자를지, 세로축 스크롤을 추가할지 등의 여부를 지정합니다.

이 속성들 또한 위와 같은 속성 값을 가집니다.

 

 

 

 

overflow: visible

 

div { width: 100%; height: 60px; background: #ffeaed; overflow: visible; }

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis arcu nisi, quis ultrices libero tincidunt lobortis. Aenean sollicitudin quis neque quis venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vitae ante quis diam ultrices lobortis eu sed ipsum. Sed dui risus, lobortis nec vulputate in, pellentesque at nisi. Quisque vulputate in dui vel pharetra. Morbi iaculis aliquet lacus vel rutrum. Curabitur quis lorem malesuada tortor dictum varius. Vestibulum arcu est, dignissim ac malesuada vel, dictum fermentum tortor.

 

 

 

overflow: hidden

 

div { width: 100%; height: 60px; background: #ffeaed; overflow: hidden; }

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis arcu nisi, quis ultrices libero tincidunt lobortis. Aenean sollicitudin quis neque quis venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vitae ante quis diam ultrices lobortis eu sed ipsum. Sed dui risus, lobortis nec vulputate in, pellentesque at nisi. Quisque vulputate in dui vel pharetra. Morbi iaculis aliquet lacus vel rutrum. Curabitur quis lorem malesuada tortor dictum varius. Vestibulum arcu est, dignissim ac malesuada vel, dictum fermentum tortor.

 

 

overflow: scroll

 

div { width: 100%; height: 60px; background: #ffeaed; overflow: scroll; }

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis arcu nisi, quis ultrices libero tincidunt lobortis. Aenean sollicitudin quis neque quis venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vitae ante quis diam ultrices lobortis eu sed ipsum. Sed dui risus, lobortis nec vulputate in, pellentesque at nisi. Quisque vulputate in dui vel pharetra. Morbi iaculis aliquet lacus vel rutrum. Curabitur quis lorem malesuada tortor dictum varius. Vestibulum arcu est, dignissim ac malesuada vel, dictum fermentum tortor.

 

 

overflow: auto

 

div { width: 100%; height: 60px; background: #ffeaed; overflow: auto; }

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis arcu nisi, quis ultrices libero tincidunt lobortis. Aenean sollicitudin quis neque quis venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vitae ante quis diam ultrices lobortis eu sed ipsum. Sed dui risus, lobortis nec vulputate in, pellentesque at nisi. Quisque vulputate in dui vel pharetra. Morbi iaculis aliquet lacus vel rutrum. Curabitur quis lorem malesuada tortor dictum varius. Vestibulum arcu est, dignissim ac malesuada vel, dictum fermentum tortor.