스타일을 이용한 (여러)문장 줄이기 CSS ellipsis multiline

스타일을 이용한 문장 줄이기 한줄인 경우 아래와 같이 적용

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

여러줄인 경우 또는 wrap 된 경우 위와 같이 해선 안된다. CSS를 이용한 방법이 있지만 모든 웹브라우저에는 적용이 안된다

.classSec{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap:break-word;
}

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

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
}
.ellipsis.multiline {
  white-space: normal;
}

 (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);

/* this is a one line ellipsis */
Lorem ipsum dolor sit amet, consectetur adipisicing elit

/* this is a multiline ellipsis */
Lorem ipsum dolor sit amet, consectetur adipisicing elit

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

 

jQuery.dotdotdot-master.zip