word-break:break-all / word-wrap:break-word (강제줄바꿈)

1. word-break:break-all
2. word-wrap:break-word

하나의 문장을 띄어쓰기할 때 쓰인 공백 기준이 아닌 문자 하나하나를 단위로 끊어주는 역할을 하는 스타일 속성.
기본적으로 <td></td> 안에서 문장은 띄어쓰기 공백을 기준으로 잘리기 때문에 width크기를 지정해 주더라도 width 크기를 무시하고 늘어나게 됩니다.

이런 경우, 문자 단위로 끊어주면 자동으로 width에 맞춰 줄바꿈이 됩니다.

차이점...

# 강제로 줄바꿈(특수문자제외) style="word-break:break-all"
# 강제로 줄바꿈(특수문자포함) style="word-wrap:break-word"


3. word-break:nowrap;

반대의 경우도 있습니다. 특정한 경우에 셀의 너비를 지정했다 하더라도 줄바꿈하지 않았으면.. 할 때 사용하는 속성입니다.



<table>
<tr>
<td style="word-break:break-all">
하나의 문장을 띄어쓰기할 때 쓰인 공백 기준이 아닌 문자 하나하나를 단위로 끊어주는 역할을 하는 스타일 속성.
기본적으로 <td></td> 안에서 문장은 띄어쓰기 공백을 기준으로 잘리기 때문에 width크기를 지정해 주더라도 width 크기를 무시하고 늘어나게 됩니다.이런 경우, 문자 단위로 끊어주면 자동으로 width에 맞춰 줄바꿈이 됩니다.
</td>
</tr>
</table>


테이블 사이즈를 정해주더라도 테이블이 강제로 늘어나 자동 줄바꿈이 되지 않는 경우도 있다.
그럴땐 테이블 사이즈를 고정 시켜주면됨

영어는 띄워쓰기 기준으로 개행되지만 한글은 되지 않는데, 이때 아래와 같은 태그를 사용하면 됩니다.
word-break:keep-all

일단,
적용 차이를 비교하기 위해 table 의 td 태그에 위 스타일을 적용해보았습니다.


미적용상태

본문보기 및 뎃글보기에 사용된 코드입니다. URL과 같은 띄어쓰기가 없는 장문의 내용이 입력되는 경우 및 악의적인 장문의 내용이 입력되면 줄바꾸기가 되지 않아 레이아웃이 무너지는 경우가 있습니다. 이 경우, IE에서는 word-break:break-all을 사용하면 문제없이 줄바꿈이 됩니다만, Netscape 및 FireFox의 경우는 적용되지 않습니다. 이를 위해 overflow:hidden을 사용하면, 가로크기의 한도를 넘어서는 내용은 보여주지 않도록 하여 박스레이아웃을 유지할 수 있습니다. (주, IE의 경우는 word-break 속성에 의해 줄바꿈이 되기 때문에 문제가 없으나, FireFox의 경우, 레이아웃은 유지하나 내용을 볼 수 없게 됩니다.)

적용상태

본문보기 및 뎃글보기에 사용된 코드입니다. URL과 같은 띄어쓰기가 없는 장문의 내용이 입력되는 경우 및 악의적인 장문의 내용이 입력되면 줄바꾸기가 되지 않아 레이아웃이 무너지는 경우가 있습니다. 이 경우, IE에서는 word-break:break-all을 사용하면 문제없이 줄바꿈이 됩니다만, Netscape 및 FireFox의 경우는 적용되지 않습니다. 이를 위해 overflow:hidden을 사용하면, 가로크기의 한도를 넘어서는 내용은 보여주지 않도록 하여 박스레이아웃을 유지할 수 있습니다.  (주, IE의 경우는 word-break 속성에 의해 줄바꿈이 되기 때문에 문제가 없으나, FireFox의  경우, 레이아웃은 유지하나 내용을 볼 수 없게 됩니다.)

적용한 상태의 테이블 영역과 텍스트의 흐름을 보면 단어의 어절에 맞게 개행이 이루어 진 것을 볼 수 있다.

[출처] : http://www.underroom.com/etc/774