css overflow-wrap 의 옵션이 여러가지인데 정확한 사용법이 궁금합니다.

Question

css overflow-wrap 의 옵션이 여러가지인데 정확한 사용법이 궁금합니다.

MDN 이나 여러가지 사이트를 보더라도 overflow-wrap 가 예전에 word-wrap 와 동의어 라는 것만 나와있고..

제대로 된 설명이 없는 경우가 많네요.

특히나 overflow-wrap : anywhere 에 대한 설명이 없는데 브라우저 디폴트로는 anywhere 가 잡힙니다.

overflow-wrap 에 대하여 설명 부탁 드립니다.

Answer 1

word-break와는 달리, overflow-wrap은 모든 단어가 넘치지 않으면 자신의 줄 안에 놓여 있을 수 없을 때 줄 바꿈을 한 번만 할 것입니다.

라고 https://developer.mozilla.org/ko/docs/Web/CSS/overflow-wrap 문서에 나와있고요,

https://codepen.io/impressivewebs/pen/ZLBvav 이 예제를 보시면 둘의 차이를 직접 비교해볼 수 있습니다.

Answer 2

안녕하세요.

overflow-wrap 과 word-break 는 동의어라고 나와 있지만 옵션 값이 서로 다릅니다.

overflow-wrap 는 normal, break-word, anywhere 값을 줄 수 있습니다.

break-word와 anywhere는 거의 동일하게 박스 요소의 문자열이 넘어갈 경우 단어 단위로 잘라서 줄바꿈 해 줍니다. 다른 점은 width의 값을 min-content로 설정했을 때, anywhere는 min-content에 따라 단어를 구분하는 것만 다릅니다.

샘플 : https://codepen.io/maruara/pen/YzZwPGb

# HTML

<p class="word-a">They say the fishing is excellent at Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there myself. (word-a)</p> <p class="word-b">They say the fishing is excellent at Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there myself. (word-b)</p>

# CSS

p { width: min-content; background: gold; } .word-a { overflow-wrap: break-word; } .word-b { overflow-wrap: anywhere; }