rAthus icon

[JS] "text-overflow:ellipsis" multilignes

rAthus | PRO | 04/27/16 06:29:13 PM UTC | 0 ⭐ | 609 👁️ | Never ⏰ | []
JavaScript |

1.45 KB

|

None

|

0 👍

/

0 👎

var cutAtSpace = true; // only cut on spaces so words aren't truncated
var ellipseWidth = true; // cut if text overflows width (eg looooong word)
jQuery(document).ready(function($)
{
    $('.ellipsis').css({'overflow-y':'hidden'}).each(function()
    {
        // wrap content so we can measure its height
        if ($(this).find('.wrapper-ellipsis').size()==0)
            $(this).wrapInner('<span class="wrapper-ellipsis"></span>');
        var wrapper = $(this).find('.wrapper-ellipsis');
        var content = wrapper.text().replace().replace(/\s\s+/g,' ').trim();
        // check if content overflows height
        var spliter = cutAtSpace?' ':'';
        var h1 = $(this).height()*1;
        var h2 = wrapper.height()*1;
        if (h2>h1)
        {
            var content_split = content.split(spliter);
            wrapper.html('');
            for (var i=0; wrapper.height()*1<h1 && i<1000; i++)
                wrapper.append(spliter+content_split[i]);
            var new_txt = wrapper.text();
            if (cutAtSpace)
                wrapper.html(new_txt.replace(/(\s[^\s]+){2}$/g,'')+' ...');
            else
                wrapper.html(new_txt.slice(0,-5)+'...');
        }
        // check if content overflows width
        if (ellipseWidth)
        {
            var w1 = $(this).width()*1;
            var w2 = wrapper.width()*1;
            if (w2>w1)
            {
                var content_split = content.split('');
                wrapper.html('');
                var i = 0;
                while (wrapper.width()*1<w1)
                {
                    wrapper.append(content_split[i]);
                    i++;
                }
                var new_txt = wrapper.text();
                wrapper.html(new_txt.slice(0,-3)+'...');
            }
        }
    });
});

Comments