[HTML] 알파벳(특히 띄어쓰기 없는 긴 문자열)이 자동 줄바꿈되지 않는 이유

✅ 문제 원인

• 영문은 띄어쓰기(space) 기준으로 줄바꿈을 시도함.
• 한글은 조합형 글자라서 단어 길이에 상관없이 자동 줄바꿈이 잘 됨.
• 하지만 알파벳이 띄어쓰기 없이 계속 이어질 경우, 브라우저는 줄바꿈을 하지 않음 → 요소가 넘치거나 overflow 발생.

---

✅ 해결 방법: CSS 적용

word-break, overflow-wrap, white-space 속성 등을 조합하여 줄바꿈을 유도할 수 있습니다.

div[name="tdlTtl"] { 
    word-break: break-all; /* 단어 중간이라도 줄바꿈 허용 */ 
    overflow-wrap: break-word; /* 긴 단어가 박스를 넘기지 않게 줄바꿈 */ 
    white-space: normal; /* 텍스트 줄바꿈 허용 */ 
}

 

 

또는 inline style로:

<div name="tdlTtl" style="word-break: break-all; overflow-wrap: break-word; white-space: normal;"> 
	작업2ㅁㅁaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccc... 
</div>

 

---

💡속성 설명

속성	설명
word-break: break-all	단어 중간이라도 줄바꿈 허용 (영문 강제 줄바꿈에 효과적)
overflow-wrap: break-word	긴 단어가 줄 안에 못 들어갈 때 줄바꿈 허용
white-space: normal	일반적인 줄바꿈 허용 (기본값이지만 명시적으로 쓰면 안전)

 

---

✅ 참고

• break-all은 영문만 계속 입력될 때 단어 중간에 강제로 끊는 효과를 줌.
• break-word는 overflow-wrap이나 오래된 브라우저용으로 word-wrap도 함께 써도 됨:

 

word-wrap: break-word; /* 오래된 브라우저 호환 */