[CSS] word-break, word-wrap 속성

 

word-break

- 아시아 언어를 제어하는 줄바꿈 속성

- 문장이 길어지면 줄바꿈(normal)이 일어남

 

특징	설명
기본값	normal
상속	가능
애니메이션	적용 안됨
버전	CSS3

 

[Property]

1. normal : word-break 속성의 기본값

2. break-all : 글자를 기준으로 무조건 줄바꿈

3. kepp-all : 단어를 기준으로 줄바꿈

    * 특수문자와 언어에 따라 사용 여부를 결정해야 함 (특수문자 때문에 CJK, non-CHK 모두 설정한 width를 오버함)

    → word-wrap:break-word 를 함께 사용

4. inherit : word-break의 값을 상위요소한테 상속받음

 

 

word-wrap

- 비아시아 언어를 제어하는 줄바꿈 속성(가로 영역에 넘친 단어를 분리)

- 문장이 길어지면 줄바꿈이 자동으로 이루어짐

  * 하지만 한글은 해당되지 않으며, 의미가 없는 단어 또는 주소 같은 경우는 줄바꿈이 일어나지 않음

- word-wrap이 적용되려면 width값이 지정된 인라인, 블록 요소여야함 (혹은 height)

 

특징	설명
기본값	normal
상속	가능
애니메이션	적용 안됨
버전	CSS3

 

[Property]

1. normal : word-wrap 속성의 기본값

2. break-word : 무조건 줄바꿈(특수문자의 줄바꿈 처리)

3. inherit : word-break의 값을 상위요소한테 상속받음