[글넘침 처리,줄바꿈]word-break&word-wrap

word-break&word-wrap

[word-break]

- word-break는 문자열의 줄바꿈을 설정해줍니다.

- 줄바꿈은 공백(띄어쓰기) 혹은 하이픈(hyphen) 사용시 줄바꿈이 시행되지만 CJK(중국,일본,한국) 언어에서는 '음절'에 따라 줄바꿈이 시행됩니다.

속성 값

1. normal(기본값) 

2. break-all 

:  무조건 줄바꿈(단어가 깨짐) / non-CJK일때는 임의대로 줄바꿈 가능,  CJK에서는 normal과 원리동일.

3. keep-all

      :  단어를 유지하면서 바꿔줌.

** But 특수문자와 언어에따라 사용여부를 결정해야한다. 아래 테스트를 살펴보자

(1) 특수문자 없이 그대로 CJK와 non-CJK(영문)을 비교해보았다.

https://jsfiddle.net/jywoo/h92r4cv6/22

(2) 특수문자 추가

** 특수문자 때문에 CJK, non-CJK 전부 지정 width에서 흘러넘치고 있다!

https://jsfiddle.net/jywoo/h92r4cv6/33

[word-wrap]

박스의 가로영역에 넘친 단어를 분리합니다.

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

1. normal 

     : 기본값, 글자가 끊어지지않고 표시됨 

2. break-word

     : 강제로 줄바꿈

- 특수문자 포함한 word-wrap 테스트

https://jsfiddle.net/jywoo/26mvefLw/4/

break-word를 해주니 특수문자가 흘러넘치지 않는다.

** 보통 웹페이지를 만들때 특수문자가 심하게 겹쳐서 줄바꿈이 흘러넘치는 경우는 거의 없지만, 사용자입력을 통해 이벤트가 이뤄지는 경우(입력 후 내용을 게시하는 게시글 제목, 혹은 채팅 디자인 등등) 특수문자 흘러넘침에 관해서도 처리를 해주어야한다.

[조합해서 사용하기]

CJK로 줄바꿈을 할때 keep-all을 사용해서 단어를 줄바꿈하여 흘러넘치지 않게하는 디자인을 주로쓴다. 하지만 가끔 울퉁불퉁한 외곽이 드러나기때문에 미관상으로ㅜㅜ 흠터레스팅,,,,,

그래서 여기에 text-align을 더해서 정리해보자

1. word-break:keep-all+text-align:justify

https://jsfiddle.net/jywoo/8q6Lbeut/1/

한글은 이 조합이 나름 정돈되어 보인다.

특수문자가 흘러넘치지 않고 한글이 단어로 줄바꿈 표시되게 해보자.

2. CJK 흘러넘침방지 + 단어로 줄바꿈

word-break : keep-all, word-wrap:break-word

https://jsfiddle.net/jywoo/8q6Lbeut/7/

3. 2번 조합에 + text-align: justify;

https://jsfiddle.net/jywoo/8q6Lbeut/11

글자 흘러넘침과 줄바꿈은 언어를 생각해서 사용해야하며, 특수문자 처리도 추가로 생각하여 처리해줘야할 것이다. 또한 단어의 공백을 통한 줄바꿈은 white-space 속성을 통해서도 줄바꿈이 가능하다.

[참고]

https://css-tricks.com/almanac/properties/w/word-break/

http://wit.nts-corp.com/2017/07/25/4675

https://www.w3schools.com/cssref/css3_pr_word-break.asp

https://www.w3schools.com/cssref/css3_pr_word-wrap.asp