CSS Overflow와 Text-overflow 속성

CSS 속성중에 요소의 크기를 넘어서는 부분을 통제하는 overflow 속성에 대하여 알아봅니다.

overflow

요소의 박스에 콘텐츠가 넘칠때 표현방법을 지정한다.

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

• overflow-x와 overflow-y 속성에 대한 축약 속성이다.
• 이 속성의 두 번째 값은 선택적이며, 하나의 값만 지정할 경우 overflow-x와 overflow-y 속성에 모두 적용된다.

속성값

• visible : 넘치는 콘텐츠를 자르지 않고 요소의 박스를 넘어 표시한다. 기본값이다.
• hidden : 넘치는 콘텐츠를 자르고 보이지 않게 한다.
• scroll : 넘치는 콘텐츠를 자르지만 스크롤바를 표시한다.
• auto : 넘치면 콘텐츠를 자르지만 스크롤바가 표시된다.
• inherit : 부모 요소로부터 값을 상속 받는다.

overflow 데모 보기

자바스크립트 문법

object.style.overflow="scroll"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

overflow-style

CSS3에 추가된 속성으로 브라우저의 지원 정도 및 사용자의 선호에 따라 스크롤 방법을 결정하는 overflow 속성의 실행 방식을 지정한다. 기본적으로 값이 상속된다.

.class1 {overflow-style: marquee-block;}

속성값

• auto : 브라우저가 스크롤 방식을 결정하고 콘텐츠가 잘렸다고 판단되면 스크롤 바를 표시한다.
• move : 마우스 포인터에 의해 콘텐츠를 드래그 가능하게 한다.
• scrollbar : 일반적인 스크롤 바를 표시한다.
• marquee : 콘텐츠가 사용자 이벤트와는 독자적으로 움직인다.
• panner : 두 개의 중첩된 사각형이 생성된다. 작은 사각형은 콘텐츠가 보이는 영역이며, 큰 사각형 내에서 사용자에 의해 이동이 가능하다.

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
미지원	미지원	미지원	미지원	미지원

overflow-x, overflow-y

CSS3에 추가된 속성으로 콘텐츠가 수평 혹은 수직 방향으로 넘칠 때의 처리 방식을 결정한다.

div {overflow-x: hidden;}

속성값

• visible : 콘텐츠가 잘리지 않지만 잠재적으로 보이지 않을 수 있다.
• hidden : 콘텐츠가 잘리며 스크롤 기능이 지원되지 않는다.
• scroll : 콘텐츠가 잘리며 항상 스크롤이 지원된다.
• auto : 브라우저가 스크롤 방법을 결정하며, 필요한 경우 스크롤 바를 표시한다.
• no-display : 콘텐츠가 박스 크기에 맞춰지지 않으면 display:none 속성이 적용된 것처럼 박스가 보이지 않게 된다.
• no-content : 콘텐츠가 박스 크기에 맞춰지지 않으면 visibility:hidden 속성이 적용된 것처럼 콘텐츠가 보이지 않게 된다.

overflow-x, overflow-y 데모 보기

자바스크립트 문법

object.style.overflowX="scroll"
object.style.overflowY="scroll"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

IE8 이하 버전은 overflow-x, overflow-y 속성을 지원하지 않는다.

text-overflow

CSS3에 추가된 속성으로 요소 내에 문자열의 넘침 현상을 처리하는 방법을 결정한다.

div {text-overflow: ellipsis;}

속성값

• clip : 텍스트를 잘라낸다.
• ellipsis : 텍스트가 잘렸다는 것을 표현하기 위해 말줄임표(...)를 표시한다.
• string(문자열) : 지정된 문자열을 출력한다.

자바스크립트 문법

object.style.textOverflow="ellipsis"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE6	FF7	SFf, iOS3	CH9, An2	O11

이 속성이 비공식적으로 과거부터 존재했던듯 싶다.