nowrap 과 break-all 로 테이블 안의 줄바꿈 제어

nowrap 과 break-all 로 테이블 안의 줄바꿈 제어

특정 셀 안의 내용은 지정된 테이블의 폭에 상관없이 줄바꿈 되지 않게 할 수 있는 방법(nowrap)과, 띄어쓰기가 되지 않은 긴 영문이 셀 안에 포함돼서 테이블이 길게 늘어지는 걸 막아주는 방법(break-all)입니다.

1. nowrap 나는 서투른 글씨의 노래들을 채워 넣습니다. 나는 서투른 글씨의 노래들을 채워 넣습니다. <table width="300"> <tr> <td width="50%">나는 서투른 글씨의 노래들을 채워 넣습니다.</td> <td width="50%">나는 서투른 글씨의 노래들을 채워 넣습니다.</td> </tr> </table> 아무 옵션도 주지 않은 일반적인 테이블은 위처럼 각각 소스대로 50%씩 나눠졌습니다. 글도 테이블 폭에 따라 아래로 저절로 내려가서 폭을 유지해줍니다. 나는 서투른 글씨의 노래들을 채워 넣습니다. 나는 서투른 글씨의 노래들을 채워 넣습니다. <table width="300"> <tr> <td width="50%" nowrap>나는 서투른 글씨의 노래들을 채워 넣습니다.</td> <td width="50%">나는 서투른 글씨의 노래들을 채워 넣습니다.</td> </tr> </table> 두 개의 셀(td)에 똑같이 50%의 폭을 지정해줬지만, nowrap가 추가된 셀에서는 줄바꿈이 되지 않았습니다. 테이블에 이름이나 날짜 등의 줄바꿈이 되어서는 곤란한 셀에 위처럼 nowrap 를 넣어주시면, (별도의 줄바꿈 태그를 사용하지 않는 한) 지정된 셀의 폭과 관계 없이 아래로 줄바꿈되지 않습니다.

2. break-all fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff 나는 서투른 글씨의 노래들을 채워 넣습니다. <table width="300"> <tr> <td width="50%">fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td> <td width="50%">나는 서투른 글씨의 노래들을 채워 넣습니다.</td> </tr> </table> 위의 테이블 소스를 보시면, 테이블의 폭은 300이고 셀의 폭은 각각 50%입니다. 하지만, 왼쪽셀 안에 띄어쓰지 않은 영문을 길게 써 놓을 경우, 지정된 50%(여기서는 테이블 폭이300픽셀이므로, 300의 50%=150픽셀이 되겠죠)를 넘어서 테이블이 망가져버립니다. (익스플로러 6 에서는 망가지지 않는군요. 그렇지만, 아직 익스플로러 5.5 이하 버전을 사용하시는 분들도 많이 계시죠.) fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff 나는 서투른 글씨의 노래들을 채워 넣습니다. <table width="300"> <tr> <td width="50%" style="word-break:break-all">fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td> <td width="50%">나는 서투른 글씨의 노래들을 채워 넣습니다.</td> </tr> </table> 이런 경우는 셀 안에 위와 같은 방법으로 style="word-break:break-all" 를 추가하면, 길게 늘어진 영문이 셀의 폭에 맞춰서 착실하게 아래로 내려갑니다. (익스플로러 6 에서는 style="word-break:break-all" 를 추가하지 않아도 저절로 알아서 내려갑니다.)