CSS 줄바꿈속성 (LineBreak Property) - White-space, Word-wrap

줄바꿈을 원하는 곳에서 할 수 있도록 도와주는 속성들에 대하여 알아봅니다.

그림출처 : http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

white-space

내부에서의 자동 줄 바꿈 여부를 나타내는 값을 설정한다. 이 속성은 상속된다.

p {white-space: nowrap;}

속성값

• normal : 기본값으로 글자 줄이 자동으로 바뀐다. 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀐다.
• nowrap : 줄 바꿈이 실행되지 않는다. 콘텐츠가 다음 줄로 바뀌지 않는다.
• pre : 줄 바꿈과 기타 공백이 유지된다. 이 가능한 값은 !DOCTYPE 선언에서 표준 준수 모드를 지정할 경우에 지원된다. !DOCTYPE 선언에서 표준 준수 모드를 지정하지 않으면 이 값을 검색할 수는 있지만 렌더링에 양향을 주지 않으며 normal 값처럼 동작한다.
• pre-line : 줄 바꿈 시퀀스가 유지된다.
• pre-wrap : 줄 바꿈 시퀀스가 축소된다.
• inherit : 부모 요소로부터 값을 상속 받는다.

white-space 데모 보기

자바스크립트 문법

object.style.whiteSpace="pre"

지원 현황

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

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

word-break

CSS3에 추가된 속성으로, 단어를 기준으로 줄바꿈의 방식을 지정한다.

p.test {word-break: break-all;}

속성값

• normal : 평소 규칙대로 단어를 분리한다.
• break-all : 단어가 문자별로 분리되어 단어의 중간에도 줄 바꿈이 된다.
• keep-all : 문자별로 분리되는 것을 금지한다.

자바스크립트 문법

object.style.wordBreak="break-all"

지원 현황

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

word-spacing

단어 사이의 추가 간격을 설정한다.

p {word-spacing: 30px;}

• 음수 값을 지정할 수 있다.

속성값

• normal : 기본값으로 기본 간격이다.
• length(길이) : 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값이다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.wordSpacing="10px"

지원 현황

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

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

word-wrap

CSS3에 추가된 속성으로 줄 바꿈 모드를 설정한다. 이 속성은 상속된다.

p.test {word-wrap: break-word;}

• 이 속성은 텍스트 줄 바꿈을 설정하거나 해제하는 white-space 속성과는 다르다. word-wrap 속성은 적용되는 언어 규칙에서 허용하지 않는 단어의 위치에서 줄 바꿈이 발생하도록 허용하는지 여부만 나타낸다.

속성값

• normal : 기본값으로 콘텐츠가 컨테이너 경계를 초과한다.
• break-word : 콘텐츠가 다음 줄로 넘어가고 필요한 경우 단어 줄 바꿈이 발생한다.

자바스크립트 문법

object.style.wordWrap="break-word"

지원 현황

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