TIL - CSS > Word-break

현재 1차 프로젝트로
망고플레이트 사이트 클론을 하고 있다 !

사이트를 보면서 배우는 CSS 효과들 중 전혀 몰랐던 부분에 대해서 조금씩 정리해가야겠다.

word-break

: 문자가 내용 밖으로 벗어날 경우, 이를 줄바꿈할 것인지에 대한 여부를 설정할 때 사용하는 CSS 요소

Syntax

1. word-break: normal;
   : 기존에 정해져있는 줄바꿈 설정을 사용한다.

2. word-break: break-all;
   : overflow 를 막기위해서 단어잘림현상이 일어남 어떤 문자이든지 간에 break 하는데 사용

   Ex.
   Say Hel
   llo Hi

   이런식으로 단어의 잘림현상이 일어남(모든 word / letter)
3. word-break: keep-all;
   : overflow를 막기는 하나, 단어 자체를 잘게 자르진 않음
   한국어, 중국어, 일본어의 경우 broken 되지 않고 다른 언어의 경우 normal값과 같다.
   예를 들어

Ex.
Say Hello
in English

이런식으로 단어 자체를 자르지는 않고, overflow를 막아줌

4. word-break: break-word;
   : overflow를 막기 위해서 단어의 축약지점에서 단어의 잘림현상 발생

5. word-break: initial;
   : default value로 속성을 설정하는 것

6. work-break: inherit;
   : 부모요소의 속성을 상속받는 것

참고> word-wrap: break-word

-> css속성으로 overflow를 막기위해서 랜덤한 지점에서 단어들을 자르는데 사용
word-break: break-all은 단어상관없이 문자를 그냥 줄이 끝나야 하는 시점에서 잘라서 overflow를 막는다면 word-wrap : break-word는 랜덤기준으로 단어를 자른다. 단어 자체는 자르지 않음!
예를 들어,

안녕하세요 저는 
개발자를 꿈
꾸고 있습니다.

이런식으로 !

실제로 망고플레이트에서 적용되어서 사용되고 있는 것은 여러개 이겠지만
현재 내가 클론하는 페이지에서 활용되고 있는 것은

  .res_name {
    display: inline-block;
    max-width: 100%;
    word-break: break-all;
  }

span 안에 해당 속성이 들어갔는데, span의 크기가 고정이기때문에 해당 글자가 밖으로 나오지않도록
모든 단어를 break하는 속성을 준 것 같다.

참고 : CSS tricks / MDN / W3C