스타일을 이용한 문장 줄이기 CSS ellipsis multiline

@http://docs.tinyfactory.co/jquery/2012/08/11/text-overflow-ellipsis-using-jquery.html

 

스타일을 이용한 문장 줄이기

한줄인 경우 아래와 같이 적용

<style>

.classname{overflow : hidden; white-space: nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; -moz-text-overflow:ellipsis}

</style>

 

여러줄인 경우 또는 wrap 된 경우 위와 같이 해선 안된다.

CSS를 이용한 방법이 있지만 모든 웹브라우저에는 적용이 안된다

<style>

.classSec{

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2; /* 라인수 */

-webkit-box-orient: vertical;

word-wrap:break-word;

}

</style>

 

결국 js 를 이용해야 하는데 아래의 코드를 이용하면 된다.

<style type="text/css">
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
}

.ellipsis.multiline {
  white-space: normal;
}
</style>

<script type="text/javascript">
<!--
 (function($) {
        $.fn.ellipsis = function()
        {
                return this.each(function()
                {
                        var el = $(this);

                        if(el.css("overflow") == "hidden")
                        {
                                var text = el.html();
                                var multiline = el.hasClass('multiline');
                                var t = $(this.cloneNode(true))
                                        .hide()
                                        .css('position', 'absolute')
                                        .css('overflow', 'visible')
                                        .width(multiline ? el.width() : 'auto')
                                        .height(multiline ? 'auto' : el.height())
                                        ;

                                el.after(t);

                                function height() { return t.height() > el.height(); };
                                function width() { return t.width() > el.width(); };

                                var func = multiline ? height : width;

                                while (text.length > 0 && func())
                                {
                                        text = text.substr(0, text.length - 1);
                                        t.html(text + "...");
                                }

                                el.html(t.html());
                                t.remove();
                        }
                });
        };
})(jQuery);
//-->
</script>

/* this is a one line ellipsis */
<div class="ellipsis" style="width: 100px; border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

/* this is a multiline ellipsis */
<div class="ellipsis multiline" style="width: 100px; height: 40px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

<script type="text/javascript" src="/js/jquery.ellipsis.js"></script>
<script type="text/javascript">
$(".ellipsis").ellipsis();
</script>

2014.05.16