How to fill the DIV with long text and display ellipsis if it overflow

Question

I have the following JSFiddle: http://jsfiddle.net/ofrj55j4/21/

How do I show as much text inside the DIV before showing the ellipsis (right now it is showing only one line)?

HTML:

<div class="col span_1_of_3" style="height: 120px;">
    <div class="test2n" style="height: 100%;">
        <div class="main">
            <img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="http://i59.tinypic.com/23hvrc2.png" />
        </div>
        <div class="sub">
            <div class="sl"><a href="/template.aspx?id=2790">How we can better develop</a></div>
            <div class="sr">This DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>
        </div>
    </div>
</div>



<div class="col span_1_of_3" style="height: 120px;">
    <div class="test2n" style="height: 100%;">
        <div class="main">
            <img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="http://i59.tinypic.com/23hvrc2.png" />
        </div>
        <div class="sub">
            <div class="sl"><a href="/template.aspx?id=2790">How we can better develop</a></div>
            <div class="sr">This DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>
        </div>
    </div>
</div>



<div class="col span_1_of_3" style="height: 120px;">
    <div class="test2n" style="height: 100%;">
        <div class="main">
            <img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="http://i59.tinypic.com/23hvrc2.png" />
        </div>
        <div class="sub">
            <div class="sl"><a href="/template.aspx?id=2790">How we can better develop</a></div>
            <div class="sr">This DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>
        </div>
    </div>
</div>

Answer 1

See my working code demo here >> jsFiddle Link <<

This seemed like a fun snippet to play around with. Although a pure css solution is not readily identified (by me at least), here is a js solution I came up with...

First have some js hook in your cell (I used 'jsDynamicOverflow')

<div class="arbitrary-background">
    <div class="arbitrary-container">
        <div class="arbitrary-row cf">
            <div class="arbitrary-cell">
                The quick brown fox jumped over the lazy dog.
            </div>
            <div class="arbitrary-cell jsDynamicOverflow">
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
            </div>
        </div>
    </div>
</div>

Then, for each one of those, create a child with a background color gradient of the nearest parent that has a background color. On window resize, see if the ellipsis is needed. And if the ellipsis is clicked, then show the rest of the cell (or otherwise tween it).

var $window = $(window);
var $jsDynamicOverflow = $('.jsDynamicOverflow');

$jsDynamicOverflow.each(function() {
    var _this = this;
    var $this = $(this);
    var backgroundColor = false;
    var $bgTarget = $this;

    // determine background-color
    while (!backgroundColor) {
        var sThisBgColor = $bgTarget.css('background-color');
        var bIsTransparent = sThisBgColor == 'rgba(0, 0, 0, 0)';
        backgroundColor = !bIsTransparent ? sThisBgColor : backgroundColor;
        if (($bgTarget.is('html')) && !backgroundColor) {
            backgroundColor = '#FFFFFF';
        }
        else {
            $bgTarget = $bgTarget.parent();
        }
    }

    // dynamic ellipsis

    var sGradientStyle = 'background: -webkit-linear-gradient(left,rgba(0,0,0,0),'+backgroundColor+' 40%);background: -o-linear-gradient(right,rgba(0,0,0,0),'+backgroundColor+' 40%);background: -moz-linear-gradient(right,rgba(0,0,0,0),'+backgroundColor+' 40%);background: linear-gradient(to right, rgba(0,0,0,0), '+backgroundColor+' 40%);';

    var $span = $('<span class="jsEllipsis" style="'+sGradientStyle+'">&#133;</span>');
    $span.appendTo($this);

    var fWindowResize = function() {
        // determine if ellipsis should be visible
        var bShowEllipsis = (_this.offsetHeight < _this.scrollHeight || _this.offsetWidth < _this.scrollWidth);

        $this.toggleClass('jsHasEllipsis', bShowEllipsis);
    };

    var fShowOverflow = function() {
        var iHeight = $this.height();
        var iDelta = _this.scrollHeight - _this.offsetHeight;
        //$this.height(iHeight + iDelta);
        $this.removeClass('jsHasEllipsis');
        // OR
        $this.css('height', 'auto');
    };

    // wire events
    $window.resize(fWindowResize);    

    // initial state
    fWindowResize();
    $span.click(fShowOverflow);

});

Finally, I have some relatively placeholder css to demonstrate the overflow:

.arbitrary-background {
    background-color: #00FF00;
}
.arbitrary-container {

}
.arbitrary-row {

}
.arbitrary-cell {
    float: left;
    width: 50%;
    overflow: hidden;
    height: 100px;
}

.jsHasEllipsis {
    position: relative;
}
.jsEllipsis {
    display: none;
    position: absolute;
    bottom: 0px;
    right: 0px;
    line-height: inherit;
    font-size: inherit;
    /*background-color: #00FF00;*/
    padding-left: 10px;
    cursor: pointer;
}
.jsHasEllipsis>.jsEllipsis {
    display: inline-block;
}


/* clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

I think with a bit of tweeking, you might be able to identify some effect that you might like.

Answer 2

At the moment there is no satisfactory pure CSS solution. This CSS could work in some situations:

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

There are some JS solutions which might be more interesting, e.g. Clamp.js

Here is a good article about different approaches and a CodePen with examples

Answer 3

You can simulate it.

Demo http://jsfiddle.net/ofrj55j4/24/

.sr {
    position: relative; /* add this to .sr */
}
.sr:after {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    content: "...";
    background: inherit; /* so the background is the same as the container */
}

The idea is to have an overlay of ellipsis or ... on the edge of the multi-line container that the ellipsis is supposed to happen. It's not a genuine ellipsis but serves the purpose good enough and is compatible with older browsers.