overflow:hidden, text-overflow:ellipsis 속성과 <nobr> 태그를 함께 사용하여 크기에 맞게 텍스트를 잘라서 표현하고자 한다.
<div style="padding-top:3px; border:1px solid #e4e4e4;
text-overflow:ellipsis; overflow:hidden;">
<table width=100% cellpadding=0 cellspacing=0>
<? for ($i=0; $i<count($list); $i++) { ?>
<tr><td colspan=4>
<table width=100%>
<tr>
<td class="latest" height=18>
<NOBR> <img src='<?=$latest_skin_path?>/img/latest_icon.gif' align=absmiddle>
<?
echo $list[$i]['icon_reply'] . " ";
echo " " . $list[$i]['icon_secret'];
?>
<NOBR> </td>
</tr>
</table>
</td></tr>
</table>
※ NOBR 사이에는 절대로 빈칸을 남기지말아야 한다. 그림도!
만약 위의 코드대로 실행되지 않는다면, 테이블에 style="table-layout:fixed" 속성을 준다.
1. css 적용하지 않은 기본 table테그
|
<table style="width:500px;border:1px solid #000000">
<colgroup>
<col style="width:150px"/>
<col style="width:200px"/>
<col style=""/>
</colgroup>
<thead>
</thead>
<tbody>
<tr>
<td style="border:1px solid red">
1
</td>
<td style="border:1px solid green">
2
</td>
<td style="border:1px solid orange">
3
</td>
</tr>
</tbody>
</table>
|
2. 1번테이블의 셀에 지정된 컬럼길이를 넘어가는 값이 셋팅되면
테이블 width 및 각 컬럼에 지정된 width를 무시하고 아래처럼 되버린다.
3. 컬럼에 지정된 width에서 자동 줄바꿈하기
|
<table style="width:500px;border:1px solid #000000;table-layout:fixed">
<colgroup>
<col style="width:150px"/>
<col style="width:200px"/>
<col style=""/>
</colgroup>
<thead>
</thead>
<tbody>
<tr>
<td style="border:1px solid red;word-wrap:break-word">
1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
<td style="border:1px solid green">
2
</td>
<td style="border:1px solid orange">
3
</td>
</tr>
</tbody>
</table>
|
4. width넘어가면 hidden 처리하기
|
<table style="width:500px;border:1px solid #000000;table-layout:fixed">
<colgroup>
<col style="width:150px"/>
<col style="width:200px"/>
<col style=""/>
</colgroup>
<thead>
</thead>
<tbody>
<tr>
<td style="border:1px solid red;word-wrap:nowrap;overflow:hidden">
1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
<td style="border:1px solid green">
2
</td>
<td style="border:1px solid orange">
3
</td>
</tr>
</tbody>
</table>
|
word-wrap이 잘 안먹히면 white-space가 상속되어있는지 확인하기.
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
