본문 바로가기

IT-Consultant

word-break:break-all & white-space:nowrap

 
가. 설명

1. word-break:break-all;

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

2. white-space:nowrap;

1번과 반대로 셀의 너비를 지정했다 하더라도 자동으로 줄바꿈이 되지 않게 하는 속성입니다.

나. 데모

1. word-break:break-all;

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 


2. white-space:nowrap;

손상모 손상모 손상모 손상모 손상모 손상모 


손상모 손상모 손상모 손상모 손상모 손상모 


다. 소스


<table border=1 style="width:100px;"><tr><td>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</td></tr></table><p>

<table border=1 style="width:100px;"><tr><td style="word-break:break-all;">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</td></tr></table><p>

<table border=1 style="width:100px;"><tr><td>
손상모 손상모 손상모 손상모 손상모 손상모
</td></tr></table><p>

<table border=1  style="width:100px;"><tr><td style="white-space:nowrap;">
손상모 손상모 손상모 손상모 손상모 손상모
</td></tr></table>