본문으로 바로가기

줄바꿈 속성(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


'StyleSheet > CSS' 카테고리의 다른 글

CSS3 object-fit, object-position  (0) 2016.01.06
BEM(Block Element Modifier) 방법론  (5) 2016.01.05
CSS3 : backface-visibility 속성(image flip 구현)  (0) 2016.01.04
:first-child & :first-of-type 차이점  (4) 2015.12.30
Google Icon Animation  (0) 2015.12.29

댓글을 달아 주세요