[HTML, CSS] div 안에 텍스트가 범위 밖으로 나가는 현상 해결(자동 줄바끔 처리)

간혹 HTML, JSP 화면을 개발하다가 div 태그 안에 width를 직접 정해주면, 텍스트가 자동으로 줄바꿈이 되지 못하고, div 영역 밖으로 텍스트가 벗어나는 경우가 발생한다.

---

1. 해결

해결 방법은 간단하다.

 

해당 div 영역 안에 word-break: break-all 을 추가해주면 된다.

word-break: break-all

예시)

<div style="width:500px; height:250px; background-color:grey;">
12312312415613461361346136136134613461346134613463416134612312312312312312312312321
</div>

- 아래는 word-break 코드 추가

<div style="width:500px; height:250px; background-color:grey; word-break:break-all;">
12312312415613461361346136136134613461346134613463416134612312312312312312312312321
</div>

- class로 선언시에도 사용이 가능하다.

// css
.word-break{
    width:500px;
    height:250px;
    background-color:grey;
    word-break:break-all;
}

// HTML
<div class="word-break">
12312312415613461361346136136134613461346134613463416134612312312312312312312312321
</div>

---

참고

- 텍스트가 div 범위 밖으로 나가는 현상 해결하기(줄바꿈 처리하기) :: JHRunning (tistory.com)