[유용정보] text-overflow: ellipsis; 르 width % 에 적용시키기 위해

글자가 영역보다 길때 끝에 ... 로 처리하는  text-overflow: ellipsis;  가

해당 영역이 px 로 지정되어있는 경우에만 작동한다.  

반응형 사이트라든지,  해상도가 다 다른 모바일들에서 사용하기 위해

%  로 되어있는 곳에서는 작동 안 하는 한계가 있다

퍼센트로도 사용 가능하게 하려면..

<style>

.element {  display: table;  table-layout: fixed;  width: 100%; }

.truncate {  display: table-cell;  white-space: nowrap;  text-overflow: ellipsis;  overflow: hidden; }

</style>

<div class="element">

  <div class="truncate">

2008년 정식 사업자등록 후 14년동안 오직 XE 만을 제작해온 XE 전문 제작업체입니다.

순수 XE 기반의 포트폴리오만 282개, 자체 개발/보완 모듈들의 기능개발 내역이 1025가지를 넘습니다.

XE 개발로는 국내 최다 경험을 지닌 최고의 전문업체 일겁니다. 

비록 제작 비용이 좀 높은 편이긴하나, XE 기반의 사이트제작만큼은 확실히 책임져드릴 수 있습니다!

XE 기반 사이트의 관리의 용이성을 직접 체험해세요. 제작 후 유지보수비가 들지 않습니다.

  </div>

</div>

이렇게 적용하면 된다.

스케치북 모바일 스킨의 경우도 모바일 목록에서 제목 부분의 경우

<h3 class="ngeb element" >

<div class="truncate">

{$document->getTitle($mi->subject_cut_size)}

</div>

</h3>