word-break

css property

word-break 속성은 컨텐츠가 자신의 컨텐츠 박스 밖으로 overflow될 때 줄바꿈 속성을 지정할 수 있다.

word-break 속성을 사용하기 위해서는 CJK언어에 대한 간단한이해가 필요하다.
:question: CJK(chinese/japanese/korean)언어는 띄어쓰기가 없거나 불필요하다.
중국어는 띄어쓰기가 없으며 일본어와 한국어도 띄어쓰기가 그렇게 강제적으로 필요하진 않다.
내가굳이띄어쓰기를하지않는다고해서글을읽는데에별문제가없다
또한 한 글자가 정사각형의 모양을 띄는 문제도 있다.
따라서 CJK의 word-break속성은 따로 명시하여 지정해주어야 한다.

value

word-break에는 많은 value를 지정해줄 수 있지만 가장 자주 쓰이는 4가지만 알고 넘어가도록 한다.

noraml

word-break속성을 명시 하지 않을 시 적용되는 기본 규칙이다.

단어 단위로 줄을 바꾸며, 단어가 전체 줄에 맞지 않으면 그 단어는 다음줄로 넘어간다.
공백, 하이픈, 등 자연적인 단어 구분 기호에서도 줄바꿈이 일어난다.
- URL텍스트 사용시 쿼리?에서 줄바꿈이 일어나게 하는 원인이다.

break-all

overflow방지를 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있다.

주로 CJK언어에서 사용된다. 띄어쓰기가 없는 글자 단위로 줄바꿈이 필요한 경우에도 유용하다.
URL처럼 공백이 없는 긴 문자열의 경우 유용하다. normal에서 ?쿼리부분에 줄바꿈이 된다면 break-all을 걸어서 자연스럽게 만들 수 있다.

keep-all

한글 및 중국어, 일본어 등 CJK 텍스트에서 단어가 아닌 문장 단위로만 줄을 바꾼다.
영어와 같은 알파벳 기반 언어의 경우 normal과 동일하게 동작한다.
CJK 언어의 경우에도 단어 단위로 줄 바꿈이 안 되기 때문에, 가독성을 위해 문장이 끊기지 않고 유지된다.

break-word (비표준)

break-all과 유사하게 긴 단어가 줄을 벗어날 경우 글자 단위로 줄을 바꾼다.
표준 CSS속성은 아니며 일부 브라우저에서는 동작하지 않을 수 있다.

ex

브라우저의 가로 크기를 변경해가며 테스트해봐도 된다.

word-break: normal

This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉안녕하세요반갑습니다콘솔에헬로우월드를찍어보시겠어요만약에URL링크에쿼리로?가들어간다면줄바꿈이어떻게진행될까요? https://www.google.com/search?q=iframe&sca_esv=187375755702f53b&sxsrf=ADLYWILkvNlQhM7fpEBVKqd3_AmTXnK65g%3A1730785099399&ei=S68pZ_CIGNKQvr0PwPbFOA&ved=0ahUKEwiw2qD4vMSJAxVSiK8BHUB7EQcQ4dUDCA8&uact=5&oq=iframe&gs_lp=Egxnd3Mtd2l6LXNlcnAiBmlmcmFtZTIKECMYgAQYJxiKBTINEAAYgAQYsQMYFBiHAjIKEAAYgAQYFBiHAjIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgYQABgHGB4yBhAAGAcYHki5AlAAWABwAHgAkAEAmAF9oAF9qgEDMC4xuAEDyAEA-AEBmAIBoAKDAZgDAJIHAzAuMaAH-QU&sclient=gws-wiz-serp

줄바뀜이 이상해요 / word-break