2009년 7월 2일 목요일

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

1. word-break:break-all;

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

2. word-break:keep-all;

1번과 비슷하나 문자가 아닌 단어 단위로 끊어주는 역할을 하는 속성입니다.

3. white-space:nowrap;

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

나. 데모

1. word-break:break-all;

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

2. word-break:keep-all;

전지현 전지

현 전지현 전

지현 전지현 전지현

전지현

전지현

전지현

전지현

전지현

전지현

3. 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="word-break:keep-all;">
전지현 전지현 전지현 전지현 전지현 전지현
</td></tr></table>

<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>

댓글 없음:

댓글 쓰기