← λͺ©λ‘μœΌλ‘œ
CSS word-break 정리

ν•œκΈ€μ€ μ»¨ν…Œμ΄λ„ˆ λ„ˆλΉ„μ— 맞좰 μ•Œμ•„μ„œ μ€„λ°”κΏˆλ˜λŠ”λ°, μ˜λ¬Έμ΄λ‚˜ μˆ«μžλŠ” 셀을 뚫고 λ‚˜κ°‘λ‹ˆλ‹€. 이건 CSSκ°€ μ•„λ‹ˆλΌ μœ λ‹ˆμ½”λ“œ λͺ…μ„Έμ—μ„œ λΉ„λ‘―λœ λ™μž‘μž…λ‹ˆλ‹€.

ν•œκΈ€μ€ 되고 μ˜λ¬Έμ€ μ•ˆ λ˜λŠ” 이유

μœ λ‹ˆμ½”λ“œλŠ” λͺ¨λ“  λ¬Έμžμ— Line Break classλ₯Ό λΆ€μ—¬ν•©λ‹ˆλ‹€. 이 λΆ„λ₯˜κ°€ μ€„λ°”κΏˆ λ™μž‘μ„ κ²°μ •ν•©λ‹ˆλ‹€.

ν•œκΈ€/쀑ꡭ어/일본어(CJK) λ¬ΈμžλŠ” ID(Ideographic) ν΄λž˜μŠ€μž…λ‹ˆλ‹€. κΈ€μžμ™€ κΈ€μž 사이가 μ „λΆ€ μ€„λ°”κΏˆ κ°€λŠ₯ 지점이라 μ»¨ν…Œμ΄λ„ˆ λ„ˆλΉ„μ— 맞좰 μžμ—°μŠ€λŸ½κ²Œ λŠκΉλ‹ˆλ‹€. ν•œκΈ€μ€ 음절 ν•˜λ‚˜ν•˜λ‚˜κ°€ 독립적 의미λ₯Ό κ°€μ§ˆ 수 μžˆμ–΄μ„œ CJK와 λ™μΌν•˜κ²Œ μ·¨κΈ‰λ©λ‹ˆλ‹€.

반면 영문/μˆ«μžλŠ” AL(Alphabetic) ν΄λž˜μŠ€μž…λ‹ˆλ‹€. κ³΅λ°±μ΄λ‚˜ ν•˜μ΄ν”ˆ 같은 λͺ…μ‹œμ  κ΅¬λΆ„μžμ—μ„œλ§Œ μ€„λ°”κΏˆλ©λ‹ˆλ‹€. 11111111111111 같은 곡백 μ—†λŠ” λ¬Έμžμ—΄μ€ μ€„λ°”κΏˆ 지점이 μ—†μ–΄μ„œ 셀을 λ„˜μΉ©λ‹ˆλ‹€.

CSSμ—μ„œλŠ” 이 κΈ°λ³Έ λ™μž‘μ„ λ°”κΏ€ 수 μžˆλŠ” 속성이 λͺ‡ κ°€μ§€ μžˆμŠ΅λ‹ˆλ‹€. word-break, overflow-wrap, line-breakκ°€ 각각 λ‹€λ₯Έ λ ˆλ²¨μ—μ„œ μ€„λ°”κΏˆμ„ μ œμ–΄ν•©λ‹ˆλ‹€.

word-break

Line Break class 자체λ₯Ό μž¬μ •μ˜ν•˜λŠ” μ†μ„±μž…λ‹ˆλ‹€.

normal (κΈ°λ³Έκ°’)

Unicode UAX #14 μ•Œκ³ λ¦¬μ¦˜μ„ κ·ΈλŒ€λ‘œ λ”°λ¦…λ‹ˆλ‹€.

  • CJK: κΈ€μž 사이 μ–΄λ””μ„œλ“  μ€„λ°”κΏˆ (ID 클래슀)
  • Latin/숫자: 곡백, ν•˜μ΄ν”ˆ λ“± κ΅¬λΆ„μžμ—μ„œλ§Œ μ€„λ°”κΏˆ (AL 클래슀)
"μ•ˆλ…•ν•˜μ„Έμš”λ°˜κ°‘μŠ΅λ‹ˆλ‹€"  β†’ μ…€ λ„ˆλΉ„μ— 맞좰 κΈ€μž λ‹¨μœ„λ‘œ μ€„λ°”κΏˆ
"HelloWorldTest"       β†’ 곡백 μ—†μœΌλ©΄ ν•œ μ€„λ‘œ λ„˜μΉ¨

break-all

AL 클래슀 문자의 μ€„λ°”κΏˆ κ·œμΉ™μ„ ID처럼 λ³€κ²½ν•©λ‹ˆλ‹€. λΉ„-CJK λ¬Έμžλ„ κΈ€μž 사이 μ–΄λ””μ„œλ“  μ€„λ°”κΏˆμ„ ν—ˆμš©ν•˜κ²Œ λ©λ‹ˆλ‹€. CJKλŠ” 이미 κΈ€μž λ‹¨μœ„λ‘œ λŠκΈ°λ‹ˆκΉŒ λ³€ν™” μ—†μŠ΅λ‹ˆλ‹€.

"11111111111111" β†’ μ…€ λ„ˆλΉ„μ— 맞좰 "1111111\n1111111" 처럼 λŠκΉ€

overflowκ°€ λ°œμƒν•˜λŠ” μ§€μ μ—μ„œ λ°”λ‘œ λŠμŠ΅λ‹ˆλ‹€.

keep-all

break-all의 μ •λ°˜λŒ€μž…λ‹ˆλ‹€. CJK의 ID 클래슀λ₯Ό AL둜 μž¬λΆ„λ₯˜ν•΄μ„œ κ³΅λ°±μ—μ„œλ§Œ μ€„λ°”κΏˆλ˜λ„λ‘ λ³€κ²½ν•©λ‹ˆλ‹€.

"μ•ˆλ…•ν•˜μ„Έμš”λ°˜κ°‘μŠ΅λ‹ˆλ‹€"  β†’ 곡백 μ—†μœΌλ©΄ ν•œ μ€„λ‘œ λ„˜μΉ¨ (Latin처럼)
"μ•ˆλ…•ν•˜μ„Έμš” λ°˜κ°‘μŠ΅λ‹ˆλ‹€" β†’ "μ•ˆλ…•ν•˜μ„Έμš”" μ—μ„œ μ€„λ°”κΏˆ

ν•œκ΅­μ–΄μ²˜λŸΌ 띄어쓰기가 μžˆλŠ” μ–Έμ–΄μ—μ„œ 단어 λ‹¨μœ„ μ€„λ°”κΏˆμ„ μœ μ§€ν•˜κ³  싢을 λ•Œ μ”λ‹ˆλ‹€.

auto-phrase (μ‹€ν—˜μ )

λΈŒλΌμš°μ €κ°€ μžμ—°μ–΄ 뢄석을 톡해 의미 λ‹¨μœ„(phrase)μ—μ„œ μ€„λ°”κΏˆν•©λ‹ˆλ‹€. normalμ—μ„œλŠ” κΈ€μž λ‹¨μœ„λ‘œ 아무 λ°μ„œλ‚˜ λŠκΈ°μ§€λ§Œ, auto-phraseλŠ” 의미 λ‹¨μœ„λ₯Ό νŒŒμ•…ν•΄μ„œ μžμ—°μŠ€λŸ¬μš΄ μœ„μΉ˜μ—μ„œ λŠμŠ΅λ‹ˆλ‹€. λΈŒλΌμš°μ € 지원이 맀우 μ œν•œμ μ΄λΌ μ‹€λ¬΄μ—μ„œλŠ” 아직 μ“°κΈ° μ–΄λ ΅μŠ΅λ‹ˆλ‹€.

overflow-wrap

word-breakκ°€ Line Break classλ₯Ό μž¬μ •μ˜ν•˜λŠ” 거라면, overflow-wrap은 classλŠ” κ·ΈλŒ€λ‘œ 두고 overflowκ°€ λ°œμƒν–ˆμ„ λ•Œμ˜ λŒ€μ‘ 방식을 μ§€μ •ν•©λ‹ˆλ‹€.

break-word

단어λ₯Ό λ¨Όμ € λ‹€μŒ μ€„λ‘œ μ΄λ™μ‹œν‚΅λ‹ˆλ‹€. κ·Έλž˜λ„ λ„˜μΉ˜λ©΄ κ·Έλ•Œ κΈ€μž λ‹¨μœ„λ‘œ λŠμŠ΅λ‹ˆλ‹€.

word-break: break-allκ³Ό λΉ„μŠ·ν•΄ λ³΄μ΄μ§€λ§Œ μ „λž΅μ΄ λ‹€λ¦…λ‹ˆλ‹€. break-all은 overflow μ§€μ μ—μ„œ μ¦‰μ‹œ 끊고, overflow-wrap: break-wordλŠ” 단어 이동을 λ¨Όμ € μ‹œλ„ν•©λ‹ˆλ‹€.

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”         β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚ break-allβ”‚         β”‚overflow- β”‚
β”‚ Helloooo β”‚         β”‚wrap      β”‚
β”‚ oWorld   β”‚         β”‚          β”‚
β”‚          β”‚         β”‚Hellooooo β”‚
β”‚          β”‚         β”‚oWorld    β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜         β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
 μ¦‰μ‹œ 끊음            단어 이동 ν›„ 끊음

overflow-wrap: break-wordκ°€ 보톡 더 μžμ—°μŠ€λŸ½μŠ΅λ‹ˆλ‹€. ν…Œμ΄λΈ” μ…€μ²˜λŸΌ λ„ˆλΉ„κ°€ κ³ μ •λœ κ²½μš°μ—λŠ” break-all이 더 ν™•μ‹€ν•©λ‹ˆλ‹€.

anywhere

μ‹œκ°μ  κ²°κ³ΌλŠ” break-word와 λ™μΌν•©λ‹ˆλ‹€. μ°¨μ΄λŠ” λΈŒλΌμš°μ €κ°€ μš”μ†Œμ˜ μ΅œμ†Œ λ„ˆλΉ„(min-content)λ₯Ό 계산할 λ•Œ λ°œμƒν•©λ‹ˆλ‹€.

  • break-word β€” min-content 계산 μ‹œ μ€„λ°”κΏˆ 지점을 λ¬΄μ‹œν•©λ‹ˆλ‹€. κ°€μž₯ κΈ΄ 단어 κΈ°μ€€μœΌλ‘œ μ΅œμ†Œ λ„ˆλΉ„κ°€ κ²°μ •λ©λ‹ˆλ‹€.
  • anywhere β€” min-content 계산 μ‹œ μ€„λ°”κΏˆ 지점을 λ°˜μ˜ν•©λ‹ˆλ‹€. κΈ€μž 1개 λ„ˆλΉ„κΉŒμ§€ μΆ•μ†Œ κ°€λŠ₯ν•©λ‹ˆλ‹€.
/* μ»¨ν…Œμ΄λ„ˆκ°€ width: min-content 일 λ•Œ */

overflow-wrap: break-word
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚Pneumonoultramicr β”‚  ← min-content = κ°€μž₯ κΈ΄ 단어 λ„ˆλΉ„
β”‚oscopicsilicovolc β”‚
β”‚anokoniosis       β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

overflow-wrap: anywhere
β”Œβ”€β”€β”
β”‚Pnβ”‚  ← min-content = κΈ€μž 1개 λ„ˆλΉ„κΉŒμ§€ 쀄어듦
β”‚euβ”‚
β”‚moβ”‚
β””β”€β”€β”˜

κ³ μ • λ„ˆλΉ„ μ»¨ν…Œμ΄λ„ˆμ—μ„œλŠ” λ‘˜ λ‹€ λ™μΌν•˜κ²Œ λ³΄μž…λ‹ˆλ‹€. flex/grid λ ˆμ΄μ•„μ›ƒμ—μ„œ μš”μ†Œ 크기가 min-content 기반으둜 결정될 λ•Œ 이 차이가 λ“œλŸ¬λ‚©λ‹ˆλ‹€.

참고둜 deprecated된 word-break: break-wordλŠ” λ‚΄λΆ€μ μœΌλ‘œ overflow-wrap: anywhere + word-break: normalκ³Ό λ™μΌν•˜κ²Œ λ™μž‘ν•©λ‹ˆλ‹€. min-content 계산에도 영ν–₯을 μ€λ‹ˆλ‹€. μ“°μ§€ λ§ˆμ„Έμš”. overflow-wrap을 λŒ€μ‹  μ“°λ©΄ λ©λ‹ˆλ‹€.

line-break

word-break와 overflow-wrap이 일반 ν…μŠ€νŠΈμ˜ μ€„λ°”κΏˆμ„ λ‹€λ€˜λ‹€λ©΄, line-breakλŠ” CJK λ¬Έμž₯λΆ€ν˜Έ(ꡬ두점, κ΄„ν˜Έ λ“±)의 μ€„λ°”κΏˆ κ·œμΉ™μ„ μ„Έλ°€ν•˜κ²Œ μ œμ–΄ν•©λ‹ˆλ‹€.

  • auto β€” λΈŒλΌμš°μ € κΈ°λ³Έ
  • loose β€” λŠμŠ¨ν•œ κ·œμΉ™ (짧은 쀄에 적합)
  • normal β€” 일반 κ·œμΉ™
  • strict β€” μ—„κ²©ν•œ κ·œμΉ™ (γ€Œγ€ 같은 κ΄„ν˜Έ λ’€μ—μ„œ μ€„λ°”κΏˆ κΈˆμ§€ λ“±)
  • anywhere β€” λͺ¨λ“  λ¬Έμž₯λΆ€ν˜Έ μ•žλ’€μ—μ„œ μ€„λ°”κΏˆ ν—ˆμš©

References