Prindol

skydown

Administrator

Registered: 2011-07-25

Posts: 335

[JAVASCRIPT] 한줄 글줄임, 여러줄 글줄임 ...

- 클래스를 이용하여 중복 사용 가능
- 기본 한줄 글줄임 class="ellipsis"
- 한줄 이상일때 class"ellipsis multiline" 클래스 같이 사용
- 타이틀 속성에 전체 글내용 표기

JAVASCRIPT

(function ($) {
    $(function () {
        $(document).ready(function () {
            $('.class').ellipsis();
        });

        $.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({
                        'max-height':'none',
                        'position':'absolute',
                        '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 + "<em>...</em>");
                    }
                    el.attr('title', el.text().replace(/[\t]/g, '').replace(/[\r\n]/g, ' '));
                    el.html(t.html());
                    t.remove();
                }
            });
        };//글줄임
    });//$
})(jQuery);

CSS

/* JS 글줄임 */
.ellipsis {white-space:nowrap; overflow: hidden;}
.ellipsis em {margin-left:2px; letter-spacing:0;}
.ellipsis.multiline {white-space: normal;}

---

http://cheolho.deviantart.com/