본문으로 바로가기

CSS Overflow와 Text-overflow 속성

category 웹코딩/CSS 2015.06.04 12:00

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

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



댓글을 달아 주세요

  1. BlogIcon COCO Media 2016.02.22 21:29 신고

    사이즈에 따라서 자동으로 글꼴 크기를 줄여서 한줄로 줄여주는 css속성을 찾고있었는데 text-overflow 를 이용하면 어느정도 해결이 될 것 같아보이네요!! font 에 관련된 css 공부와 overflow 와 text-overflow도 배워갑니다!! 감사합니다.

  2. pp 2016.05.13 21:14 신고

    잘보고 갑니다요

티스토리 툴바