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

1차 산출물 완료!

기초적인 결과물이므로 좀 더 다듬어서 더 성능 좋은 소스 개발 하세요~

업그레이드 하시면 저한테도 좀 알려주시고.ㅎㅎ

 

 

1. javascript 영역

<script type="text/javascript">

      

var fontSize = null;    

var pHeight = null;     

var rowHeight = null;   

var showLine = 2;       // 말줄임표를 표시할 라인 수

var lineHeightRatio = 1.2; 

var initSize = function() {

  $('.ellipsis_ext p').css("line-height", lineHeightRatio)

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

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

  rowHeight = fontSize * lineHeightRatio;

};

var isOverEllipsisHeight = function() {

return pHeight > rowHeight * showLine

};

var addEllipsis = function() {

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

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

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

};

var adjustHeightByShowLine = function() {

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

};

$(function() {

initSize();

  if(isOverEllipsisHeight()) {

    addEllipsis();

    adjustHeightByShowLine();

  }

});

 

var resizeOn = true;

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

initSize();

    if(isOverEllipsisHeight()) {

      if(resizeOn) {

        addEllipsis();

        adjustHeightByShowLine();

        resizeOn = false;

      }   

    } else {

        if(!resizeOn) {

            $('.ellipsis_tail').remove();

            resizeOn = true;

        }

    }

});

 

</script>

 

 

 

2. CSS 영역

<style>

.ellipsis_ext {

    overflow: hidden;

    margin: 1em;

    /* width: 100px; */

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

}

.ellipsis_ext p {

  margin: 0;

  padding: 0;

} 

.ellipsis_ext > *:first-child {

     float: right;

     width: 100%;

     margin-left: -5px;

}        

.ellipsis_tail {

    box-sizing : content-box;

    float : left;

    position : relative;

    left : 100%;

    width : 2em;

    margin-left : -2em;

    text-align : left;

    padding-left : 3px;

    background : white;

    display: table

}

.ellipsis_tail p {

  display: table-cell; 

  vertical-align: middle;

}

 

</style>

 

 

 

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

<div class="ellipsis_ext"><p>이건 두 줄 이상 되는 문장을 말줄임표를 이용해 줄여주는 multiline ellipsis 예제입니다.</p></div>