소개

폭이 좁은 영역에서 긴 영어 단어나 URL의 중간에 폴드를 제어할 수 있는 CSS 프로퍼티인 word-break와 ovverflow-wrap에 대해입니다. 어느 쪽도 접혀 제어를 실시하는 프로퍼티입니다만, 2개의 차이를 모르고, 모야모야하고 있었으므로 자신 나름대로 정리해 보았습니다.
결론부터 말하면, 쓰기로는 overflow-wrap 쪽이 좋은 것이라고 생각하고 있습니다(현재의 자신의 지식의 범위내에서는입니다만,,)

샘플 코드

index.html

    <p>1単語が領域幅を超える場合</p>
    <div class="text-wrap">    
    <p>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
    </div>

    <p>1単語が領域幅を超えない場合(zとaの間に半角スペース)</p>
    <div class="text-wrap">    
    <p>abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz</p>
    </div>

style.css

.text-wrap {
    width: 300px;
    border: 1px solid;
    padding: 0 12px;
}

word-break의 경우

word-break:break-all; 를 사용하여 영역에서 튀어나오는 것을 방지합니다. 다만, 일률영 단어의 도중에 강제적으로 되풀이해 버립니다.

style.css

p{
    overflow-wrap: break-word;
 }

overflow-wrap의 경우

overflow-wrap:break-word; 를 사용하여 영역에서 튀어나오는 것을 방지합니다.
기본적으로 영어 단어의 중간에 줄 바꿈하지 않지만 한 단어의 길이가 영역의 너비를 초과하는 경우에만 영어 단어의 중간에 강제로 줄 바꿈합니다.

style.css

p{
    overflow-wrap: break-word;
 }

참고로 한 사이트

【CSS】 overflow-wrap (word-wrap)과 word-break의 차이
워드브레이크와 워드랩은 다소