흔히 게시판 목록에서 길이가 고정적이지 않은 제목 때문에 길어지면 좌우 칸이 밀려서 좁아지면 흉한꼴이 되기 마련..

이때문에 서버측에서 제목 길이를 일정 길이만큼 잘라서 말줄임표를 넣어주곤 하죠.

허나 이것도 바이트로 체크해야 그나마 좀 낫고, 폰트를 무엇을 쓰느냐에 따라 영문/한글 혼합일 경우 예상했던 범위보다 좁아지기도.. 넓어지기도합니다.

그리고 창의 가로 크기가 늘어날때 테이블 가로 사이즈도 자동으로 늘려주고자 한다면 서버측에서 미리 줄여버린 경우엔 내용은 더이상 보이지는 않고 빈 여백만 늘어나겠죠..

이것을 출력되는 영역에 스타일을 주어 자동으로 영역 끝에 줄임표(...)를 붙여주고 나머지는 가려줄 수 있습니다.

<style type="text/css">
<!--
.EllipsText{
 overflow : hidden;
 white-space: nowrap;
 text-overflow:ellipsis; 
 -o-text-overflow:ellipsis; 
 -ms-text-overflow:ellipsis; 
 -moz-binding:url(/xe/ellipsis.xml#ellipsis) 
}
.listTable{width:100%;border:1px solid #E0E1DB;table-layout:fixed;white-space:nowrap;}
.listTable tr th { padding-top:3px; height:23px; font-weight:normal; background:#F6F6F6; }
.listTable tr th div{text-align:center;font-size:8pt;font-family:verdana;}
.listTable td{border-top:1px solid #EFF0ED;padding:2px 5px 2px 5px;height:22px; line-height:22px;}
.listTable .number{text-align:center;font-size:7pt;font-family:verdana;}
.listTable .title{color:#616161;font-size:8pt;font-family:verdana;}
.listTable .title a{color:#616161;text-decoration:none;}
.listTable .date{font-size:7pt;font-family:verdana;text-align:left;color:#616161;text-align:center;}
-->
</style> 

허나 파이어폭스의 경우 지원되지 않기 때문에

-moz-binding:url(/xe/ellipsis.xml#ellipsis)

을 추가해서 지원 가능하구요. 저 경로에 저 파일이 없으면 아예 텍스트가 출력이 안되어버리더군요

<?xml version="1.0" encoding="UTF-8" ?>
<bindings xmlns="http://www.mozilla.org/xbl"  xmlns:xbl="http://www.mozilla.org/xbl"  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <binding id="ellipsis">
        <content>
            <xul:window>
            <xul:description crop="end" xbl:inherits="value=xbl:text">
                <children/>
            </xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

그리고 말줄임표가 필요한.. 길이가 고정적이지 않은 곳에 클래스로 지정해주면 됩니다.

<table class="listTable">
<col width="50" />
<col />
<col width="100" />
<tr>
     <th><div>No</div></th>
     <th><div>Title</div></th>
     <th><div>Date</div></th>
</tr>
<tr>
     <td class="number">1</td>
     <td class="title EllipsText">무궁화꽃이 피었습니다. 무궁화꽃이 피었습니다. 무궁화꽃이 피었습니다. 무궁화꽃이 피었습니다. 무궁화꽃이 피었습니다. 무궁화꽃이 피었습니다.</td>
     <td class="date">2009-09-01</td>
</tr>
<tr>
     <td class="number">2</td>
     <td class="title EllipsText"><a href="./http://www.devholic.net" class="EllipsText" target="_blank">무궁화꽃이 피었습니다. 무궁화꽃이 피었습니다. 무궁화꽃이 피었습니다. 무궁화꽃이 피었습니다. 무궁화꽃이 피었습니다. 무궁화꽃이 피었습니다.</a></td>
     <td class="date">2009-09-01</td>
</tr>
</table> 

IE, 크롬 모두 첫째행, 둘째행이 동일한 결과를 보여주지만..

파이어폭스의 경우 두번째 행과 같이 <a> 태그가 사용된다면 <a> 태그에 스타일을 지정해주어야합니다.

문자열을 감싸고 있는 바로 상위 노드에 스타일이 지정돼야만 반응합니다.

이것땜에 td에서 스타일을 뺀다면..

파폭은 정상이되, 익스는 초과분이 그냥 잘려질뿐이고(줄임표 없음), 크롬은 그냥 삐져나와 옆셀 텍스트와 겹쳐버립니다.

파폭을 위해 <a> 태그에도 걸어주는 것만 잊지 않으시면 유용하게 쓸 수 있습니다.

예시

파폭에서 한가지 문제점은..

ellipsis 를 적용할 제목 옆에 이미지(예를 들면 신규 글일때 New 아이콘)를 표시해줘야 하는 경우

다른 브라우저는 모두 멀쩡하지만 파폭만 개행현상이 발생합니다. 보기가 쫌 안좋아요.

 > TIP&TECH 페이지의 경우 N 아이콘을 제목 앞에 넣었더니 제목이 이미지 밑으로 떨어지는 현상이 파폭에서 있는 관계로 이걸 BG로 대체 했다는...

먼가 다른 해결 방법이 있다면 공유해주세요 ㅠㅠ