CSS - overflow-wrap

📚 overflow-wrap ( = word-wrap)

overflow-wrap 속성은 인라인(inline) 요소에 적용되며, 텍스트가 박스 요소를 넘치지 않도록 문자열 내에 줄바꿈을 삽입해야 하는지의 여부를 설정한다. 다시 말해, 공백이 없는 긴 문자열이 텍스트박스를 넘어갈 경우, 그냥 넘어가게 둘 것인지, 아니면 해당 문자열을 자르고 줄바꿈을 할 것인지 결정한다.

속성값은 다음과 같다.

overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

• normal
  : 일반적인 break points(두 단어 사이의 공백)에서만 줄을 바꾼다.
• anywhere
  : 한 줄에 너무 긴 단어가 와서 줄바꿈을 할 수 있는 break points가 없는 경우, 하나의 문자열을 잘라 줄바꿈을 한다. 줄바꿈하는 곳에 하이픈(ㅡ)은 들어가지 않는다. 컨테이너의 min-content의 크기에 맞춰 단어를 자른다.
• break-word
  : anywhere 속성값과 똑같이, 하나의 문자열을 잘라 줄바꿈을 한다. 그러나 anywhere과는 다르게 컨테이너의 min-content로 줄바꿈을 건 경우 단어가 오버플로우 된다.

trust me im a dog(@ blurfxo)님의 친절한 설명. 설명 정말 감사합니다!