jQuery 를 이용한 두 줄 이상 말줄임 적용(multi ellipsis) 소스

jQuery 를 이용한 두 줄 이상 말줄임 적용(multi ellipsis) 소스

 

 

1. javascript 영역

<script type="text/javascript">

      

var fontSize = null;    // 폰트값, 자동 계산

var pHeight = null;     // 행간격, 자동 계산

var showLine = 3;       // 보여줄 라인 수(2 이면 2줄 표시)   

 

//      if ($.browser.msie && $.browser.version <= 10 ) {       // 익스플로어 버전 10이하 적용

$(function() {

       fontSize = parseInt($('.ellipsis_ext p').css('font-size'));

       pHeight = parseInt($('.ellipsis_ext p').css('height'));

       rowHeight = fontSize*0.15;

   

    if(pHeight > fontSize*(showLine+1)) {

       $('.ellipsis_ext p').after("<div class='ellipsis_tail'>...</div>");

       $('.ellipsis_tail').css("top", (fontSize+rowHeight)*(showLine-1)+"px");

       $('.ellipsis_tail').css("height", fontSize+"px");

           $('.ellipsis_ext').css("height", ((fontSize+rowHeight)*showLine-rowHeight)+"px");

    }

});

 

var resizeOn = true;

$(window).bind('resize', function() {

       fontSize = parseInt($('.ellipsis_ext p').css('font-size'));

       pHeight = parseInt($('.ellipsis_ext p').css('height'));

       rowHeight = fontSize*0.15;

 

    if(pHeight > fontSize*(showLine+1)) {

   

        if(resizeOn) {

            $('.ellipsis_ext p').after("<div class='ellipsis_tail'>...</div>");

            $('.ellipsis_tail').css("top", (fontSize+rowHeight)*(showLine-1)+"px");

            $('.ellipsis_tail').css("height", fontSize+"px");

            resizeOn = false;

        }

   

    } else {

        $('.ellipsis_ext').css("height", (pHeight-rowHeight*0.5)+"px");

       

        if(!resizeOn) {

            $('.ellipsis_tail').css("display","none");

            resizeOn = true;

        }

    }

});

 

</script>

 

 

 

 

2. CSS 영역

<!--[if lte IE 7]> 

<![endif]-->

 

 

<style>

.ellipsis_ext {

    overflow: hidden;

    margin: 1em;

/*     padding : 0.1em; */

/*     border: 1px solid #AAA;  */

    word-wrap: break-word; word-break:break-all;-ms-word-break:break-all;-ms-word-wrap: break-word; }

 

.ellipsis_ext > *:first-child {

     float: right;

     width: 100%;

     margin-left: -5px;

}        

 

.ellipsis_tail {

/*  border: solid thin black;  */

    box-sizing : content-box;

    float : left;

    position : relative;

    left : 100%;

    width : 2em;

    margin-left : -2em;

    text-align : left;

    padding-left : 3px;

    background : white;

   

}

 

</style>

 

 

 

 

 

3. HTML 영역 - 말줄임을 원하는 문자열을 div와 p태그로 감싼다

<div class="ellipsis_ext"><p><%=RPT_SUJX %></p></div>