RX/XE 팁
RX/XE 팁
XE FAQ 는 제가 XE공홈 '묻고 답하기'에 답변한 내용들 중 일부를 정리한 내용입니다. (대부분이 제가 한 답변이죠)
XE Tips 는 제가 XE 공홈에 쓴 XE 관련 유용한 팁들입니다. 기능개선은 공홈에 안 적어둔 XE 유용 개선팁들입니다.
유용정보는 외부 검색을 통해 알아낸 소스등을 기재해둔 곳입니다.
버그 신고내역들은 XE 사용하다가 발견한 버그 패치방법들로, Core Issue 에 기록해뒀기에 XE 에 적용이 되었을 가능성이 있겠죠

제가 쓴 글들에 대해 퍼가실때는 꼭 출처를남겨주시고.. (다만 플래시뷰 기반이기에 퍼가기는조금 힘들 수 있겠죠 ^^;)
타회원의 글들도 적혀있는 출처를 같이 꼭 기재해주세요

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

sejin7940 조회:312 2022.08.24 17:29
출처 elky 
출처URL https://gist.github.com/elky/ce230d6fcab055104cdf1a3358037fc7#file-truncate-css-L4 

글자가 영역보다 길때 끝에 ... 로 처리하는  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>

목록
전체 0건
XE Login