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> <table border="1" style="width:100px;"><tr><td style="word-break:break-all;"> <table border="1" style="width:100px;"><tr><td> <table border="1" style="width:100px;"><tr><td style="word-break:keep-all;"> <table border="1" style="width:100px;"><tr><td> <table border="1" style="width:100px;"><tr><td style="white-space:nowrap;">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</td></tr></table><p>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</td></tr></table><p>
전지현 전지현 전지현 전지현 전지현 전지현
</td></tr></table><p>
전지현 전지현 전지현 전지현 전지현 전지현
</td></tr></table>
전지현 전지현 전지현 전지현 전지현 전지현
</td></tr></table><p>
전지현 전지현 전지현 전지현 전지현 전지현
</td></tr></table>
댓글 없음:
댓글 쓰기