줄바꿈 처리 CSS 속성 word-wrap, word-break

textarea에서 글자를 입력할 때 영문의 경우 공백 없이 글자를 입력하고 입력한 글자를 HTML 태그에 표시할 때 아래와 같이 기본적으로 줄바꿈이 되지 않는다.

영문 입력시 공백 없이 글자를 입력해서 표시할 때 자연스럽게 줄바꿈을 하려면 아래 명시한 CSS 속성을 이용할 수 있다.

word-wrap:break-word -> 한글, 영문 줄바꿈(단어 단위로 줄바꿈)되고 영문의 경우 공백 없이 글자를 반복해도 줄바꿈이 됨

<div style="word-wrap:break-word;">내용</div> 영문 줄바꿈(단어 단위로 줄바꿈)

word-break:break-all -> 한글, 영문 줄바꿈(글자 단위로 줄바꿈)되고 영문의 경우 공백 없이 글자를 반복해도 줄바꿈이 됨

<div style="word-break:break-all;">내용</div> 영문 줄바꿈(글자 단위로 줄바꿈)

table에 적용할 때는

<table>에 word-wrap:break-word 와 table-layout:fixed를 함께 명시해야 한글, 영문 줄바꿈(단어 단위로 줄바꿈)되고 영문의 경우 공백 없이 글자를 반복해도 줄바꿈이 td에 적용됨

<table style="word-wrap:break-word;table-layout:fixed"> 영문 줄바꿈(단어 단위로 줄바꿈)

<table style="word-break:break-all"> 영문 줄바꿈(글자 단위로 줄바꿈)

또는

<td style="word-break:break-all;">내용</td>