CSS 작성하다가 처음보는 두 단어가 나왔었다.

word-wrap와 word-break인데 본 적도 들은 적도 없어서

이게 정확히 무슨 역할하는지 몰라 찾아보았다.

https://wit.nts-corp.com/2017/07/25/4675

Word-wrap

박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정.

word-wrap의 속성 값은 normal(기본값), break-word이 있다.

넘친 단어를 줄바꿈 하고 싶다면, word-wrap 속성의 값을 바꾸면 된다.

Word-break

같이 단어의 분리를 어떻게 할 것인지 결정.

예) (공백/띄어쓰기) 개발자·구현민 (음절) 개·발·자·구·현·민·

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

값은 normal(기본값), break-all, keep-all 이 있다.

(keep-all 의 경우 IE에서는 계속 지원하였으나 webkit에서는 15년 6월부터 지원하였다.)

[한글 좋아요, 这是一些汉字, and some Latin, و کمی نوشتنن عربی, และตัวอย่างการเขียนภาษาไทย.]

이러한 문장이 있다고 하면,

word-break: normal

[한·글·좋·아·요, 这·是·一·些·汉·字,·and·some·Latin,·و·کمی·نوشتنن·عربی·และ·ตัวอย่าง·การเขียน·ภาษาไทย.]

word-break: break-all

[한·글·어·좋·아·요, 这·是·一·些·汉·字,·a·n·d·s·o·m·e·L·a·t·i·n,·و·ﮐ·ﻤ·ﻰ·ﻧ·ﻮ·ﺷ·ﺘ·ﻦ·ﻋ·ﺮ·ﺑ·ﻰ,·แ·ล·ะ·ตั·ว·อ·ย่·า·ง·ก·า·ร·เ·ขี·ย·น·ภ·า·ษ·า·ไ·ท·ย.]

word-break: keep-all

[한글·좋아요,这是一些汉字,·and·some·Latin,·و·کمی·نوشتنن·عربی,·และตัวอย่างการเขียนภาษาไทย.]