Vertical text-overflow:ellipsis

remade as a jQuery plugin (see v3 for native). Still pretty rough in so much as more of it should be jquery'ed

by moob

HTML

<p id="el">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>

CSS

html, body {background-color:#eee;}
#el {
    background-color:white;
    line-height:1.2em; height:3.6em;
    overflow:hidden;
    border:1px dotted #aaa;
    padding:10px;
}

JavaScript

/*! vellipsis 1.0
 * ========================== 
 */  
(function ($) {
    
    $.fn.vellipsis = function () {
        
        //add an endsWith mthod to the prototype if it doesnt have one already
        if (typeof String.prototype.endsWith !== 'function') {
            String.prototype.endsWith = function(suffix) {
                return this.indexOf(suffix, this.length - suffix.length) !== -1;
            };
        }
              
        return this.each(function () {
            var $el = $(this),
                el = $el[0];
                        
            //on resize/scroll
            $(window).on('resize orientationChanged scroll', function(){
                main();
            });
           
            function main(){
                var rect = el.getBoundingClientRect(),
                    t = rect.top,
                    b = rect.bottom,
                    cache = text = ($el.data("orig") || el.innerHTML),
                    initial = el.offsetHeight,
                    styleCache = el.style.height; 
                el.innerHTML = cache;
                el.style.height="auto";
                $el.data("orig", ($el.data("orig") || el.innerHTML));
                
                arr = text.split(" ");//split into words
                var wordcount = arr.length;
                var i = wordcount;
                while(i--) {
                    var lastwordcount = text.split(" ").length;
                    temptext = text.substring(0, text.lastIndexOf(" "));
                    text = temptext;
                    if(text.endsWith(".") || text.endsWith(",")){
                        text = text.substring(0, text.length-1);
                    }
                    text = text+"&hellip;";
                    el.innerHTML = text;
                    if (el.offsetHeight <= initial) {
                        if(lastwordcount===wordcount){el.innerHTML = $el.data("orig");}
                        el.style.height=styleCache;//reset
        ...