CSS Linebreak(줄바꿈) - white-space, word-wrap

줄바꿈 속성(LineBreak Property)

줄바꿈시에 필요한 속성들에 대해 알아봅니다.

white-space

white-space 속성은 내부에서의 자동 줄 바꿈 여부를 나타내는 값을 지정합니다. 이 속성은 상속됩니다

css

p {white-space: nowrap;}

white-space 속성값

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

지원 현황

IE	크롬	파이어폭스	사파리	오페라
지원	지원	지원	지원	지원

• inherit 값은 IE7 이하는 지원하지 않으며 IE8은 !DOCTYPE 이 필요합니다.
• IE9+ 정상 지원합니다.

white-space DEMO VIEW

word-wrap

word-wrap 속성은 CSS3에 추가된 속성으로 줄바꿈 모드를 설정합니다. 이 속성은 상속됩니다.

css

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

이 속성은 텍스트 줄 바꿈을 설정하거나 해제하는 white-space 속성과는 다릅니다. 

word-wrap 속성은 적용되는 언어 규칙 상에서 허용하지 않는 단어의 위치에서 줄 바꿈이 발생하도록 허용하는지 여부만 나타내는 것입니다.

word-wrap 속성값

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

지원 현황

IE	크롬	파이어폭스	사파리	오페라
지원	지원	지원	지원	지원

word-wrap DEMO VIEW

word-break

word-break 속성은 CSS3에 추가된 속성으로, 단어를 기준으로 줄바꿈의 방식을 지정합니다.

css

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

work-break 속성값

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

지원 현황

IE	크롬	파이어폭스	사파리	오페라
지원	지원	지원	지원	미지원

word-break DEMO VIEW

word-spacing

word-spacing 속성은 단어 사이의 추가 간격을 설정할 수 있는 속성입니다.

css

p {word-spacing: 30px;}

음수값을 지정할 수 있습니다.

word-spacing 속성값

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

지원 현황

IE	크롬	파이어폭스	사파리	오페라
지원	지원	지원	지원	지원

• inherit 값은 IE7 이하는 지원하지 않으며 IE8은 !DOCTYPE 이 필요합니다.
• IE9+ 정상 지원합니다.

word-spacing DEMO VIEW

Jaehee's WebClub