줄바꿈 word-break, 글자 흘러넘침 word-wrap 속성 정리

 

 박스 내에 텍스트를 뿌릴 때에

가끔,

글 길이가 너무 길면 내가 의도했던 디자인과 다르게

보기싫게 글이 박스 밖으로 삐져나올 때가 있다!

 

그럴 때 써주는 css 속성이 word-break 이다ㅏㅏ

 

word-break 속성 종류

word-break: normal;

word-break: break-all;

word-break: keep-all;

 

• normal ( 기본값 )
  
  기본 줄 바꿈 규칙 ( 텍스트가 길면, 박스 밖으로 삐져나온다 )
  
  
• break-all
  
  텍스트가 문자( 글자 하나하나 )단위로 잘려 아래로 줄바꿈된다
  ( 글자단위가 의미없다면 주로 이거)
  
  
• keep-all
  
  한중일(CJK) 텍스트에서는 단어단위로 잘려 아래로 줄바꿈된다
  ( 단어 단위로 끊어져 있는게 나을 것 같다면 이걸 쓰자ㅏㅏ )

 

비슷한 속성으론

word-wrap이 있다

word-wrap은 너비와 높이가 지정된 인라인 요소, 또는 블록요소에 적용가능하며,긴 텍스트를 강제로 자를때 사용한다ㅏㅏ

 

Word-wrap 속성 종류

word-wrap: normal;

word-wrap: break-word;

• nomal
  
  줄바꿈이 일어나지 않는다 ( 박스 밖으로 길게 삐져나온다 )
  
  
• break-word
  
  박스 너비보다 텍스트가 길면, 자동으로 줄바꿈이 일어난다
  ( 비아시아 언어에서 단어 단위로 줄바꿈 )
  
  
  

사실 한글 텍스트만 화면에 띄워줘야 한다면,

word-wrap 속성을 사용한 것과 안한 것에 차이가 없다ㅏㅏ

(  아시아 언어만 쓰면 word-break 만 사용해주면 된다ㅏㅏㅏ )

 

출처 : 

https://developer.mozilla.org/ko/docs/Web/CSS/word-break

word-break - CSS: Cascading Style Sheets | MDN

 

https://ohgyun.com/680

word-wrap, word-break 줄바꿈 속성 차이

 

https://gold-dragon.tistory.com/85

word-break와 word-wrap