게시글에 붙여 넣은 긴 URL이나 이메일 주소가 줄바꿈되지 않고 박스 밖으로 튀어나와 모바일 화면이 옆으로 밀리는 경우가 있습니다.
이럴 때는 overflow-wrap: anywhere 한 줄로 대부분 정리됩니다. word-break와 무엇이 다른지, 한글 사이트에서 같이 쓸 때 주의할 점까지 정리했습니다.

1. 본문 영역에 overflow-wrap 한 줄 추가

게시판 본문이나 댓글처럼 사용자가 내용을 넣는 영역에 아래처럼 지정해 두면, 평소에는 단어 단위로 줄을 바꾸다가 넘칠 때만 긴 문자열 중간에서 끊어 줍니다. 멀쩡한 영문 단어까지 잘라 버리지 않는다는 점이 핵심입니다.

/* 게시글 본문, 댓글 영역 */
.post-content {
  word-break: keep-all;     /* 한글은 어절 단위 */
  overflow-wrap: anywhere;  /* 넘칠 때만 강제 줄바꿈 */
}

/* 구형 브라우저 대비 */
@supports not (overflow-wrap: anywhere) {
  .post-content { overflow-wrap: break-word; }
}

2. break-word로는 안 되는 경우: flex와 표 안쪽

overflow-wrap: break-word를 줬는데도 넘친다면 대개 flex 아이템이나 표 칸 안에 있는 경우입니다. break-word는 요소의 최소 폭을 계산할 때 쪼갤 자리를 고려하지 않아서, 긴 URL 길이만큼 칸이 버티고 늘어납니다. anywhere는 이 계산에도 반영되기 때문에 칸이 같이 줄어듭니다. 그래도 안 되면 flex 아이템에 min-width: 0, 표에는 table-layout: fixed를 함께 주면 됩니다.

/* 카드 안 이메일 주소가 넘칠 때 */
.card-info {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 표 칸 안 긴 URL */
.board-table {
  table-layout: fixed;
  width: 100%;
}

3. word-break: break-all은 마지막 수단으로

급할 때 word-break: break-all을 많이 쓰는데, 이건 넘치지 않아도 모든 글자 사이를 줄바꿈 자리로 봅니다. 그래서 영문 문장이 줄 끝마다 어색하게 잘리고 한글도 단어 중간에서 끊깁니다. 로그나 해시값처럼 원래 읽을 일이 없는 영역에만 쓰는 것을 권합니다. 참고로 word-break: break-word는 표준에서 더 이상 권장하지 않는 값입니다.