긴 글자 ellipsis 사용하여 적용해 보기

 

 

테이블 형식처럼 레이아웃을 만들때, width 넓이를 고정해서 그 넓이보다 긴 글자가 들어올 경우, width 넓이 이상의 글자는 숨겨놓는 방식으로 만들때 좋다. 우선 스타일 시트에서 text-overflow:ellipsis 는 ie 브라우저에서 작동이 된다.

나머지 부분은 크롬이나 파이어폭스를 위해 만든 것이다. 먼저 span 으로 최대 보여줄 넓이를 width 로 산정한 다음, 그 안에 div 태그를 통해 CSS의 클래스 명인 EllipsText 를 할당하면 된다. div 가 아닌 span 으로 할경우, 적용이 되지 않는다.

 

<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)         
    }
    -->
    </style>

 

  <span style="width:200px !important;">      
      <div class="EllipsText" style="width:200px">{ $T.List.mail_subject }</div>

  </span>