word-wrap, overflow-wrap, white-space, word-break

word-wrap, overflow-wrap, white-space, word-break 이 네 가지 속성은 텍스트 줄바꿈과 넘치는 콘텐츠 처리에 핵심적으로 사용돼요. 각각의 역할이 살짝 다르지만, 조합해서 쓰면 강력한 텍스트 제어가 가능해요.

 

🧩 각 속성의 역할 요약

속성설명

white-space	줄바꿈 허용 여부 + 공백 처리 방식 결정
overflow-wrap (또는 word-wrap)	단어가 너무 길어서 넘칠 때 줄바꿈 허용 여부 결정
word-break	단어 중간에서 줄바꿈할 수 있는지 여부 결정

💡 1. overflow-wrap vs word-wrap

• word-wrap은 예전 명칭이고, 현재는 overflow-wrap이 정식 이름이에요.
• 하지만 둘 다 거의 같은 기능을 해요.

overflow-wrap: break-word;
/* 또는 */
word-wrap: break-word;

 

👉 너무 긴 단어(예: URL)가 부모 너비를 넘을 경우 줄바꿈을 허용해요.

 

✅ 실전 조합 예시

💬 1. 기본적인 줄바꿈 제어

.text-basic {
  white-space: normal;            /* 기본 줄바꿈 허용 */
  overflow-wrap: break-word;      /* 너무 긴 단어는 잘라서 줄바꿈 */
}

 

💬 2. 한 줄 텍스트 + 말줄임

.text-ellipsis {
  white-space: nowrap;            /* 줄바꿈 없음 */
  overflow: hidden;               /* 넘치는 부분 숨김 */
  text-overflow: ellipsis;       /* 말줄임표 표시 */
}

💬 3. 영어/URL 같은 긴 단어도 깨지도록 처리

.text-break {
  white-space: normal;
  word-break: break-all;          /* 단어 중간에서도 줄바꿈 */
}

💬 4. 한글 자연스럽게 줄바꿈 + 영어는 단어 단위로

.text-korean-friendly {
  white-space: normal;
  word-break: keep-all;           /* 영어는 단어 단위, 한글은 글자 단위 줄바꿈 */
}

💬 5. 여러 줄 말줄임 (줄 수 제한)

.text-multiline-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;         /* 최대 줄 수 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

🎯 정리해볼게요!

상황                                                                            추천 속성 조합

 

한 줄 말줄임	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
긴 단어 강제 줄바꿈	overflow-wrap: break-word; 또는 word-break: break-all;
한글은 자연스럽게, 영어는 단어 단위로 줄바꿈	word-break: keep-all;
여러 줄 말줄임	line-clamp, -webkit-box 트릭 사용