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>

is there not a word-wrap option or something? [like this](http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap) — jbutler483, Oct 13 '14 at 16:23
I looked around and it seems only `nowrap` works with the ellipsis but then it is only in one line. — SearchForKnowledge, Oct 13 '14 at 16:24
possible duplicate of [CSS text-overflow: ellipsis; not working?](http://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working) — emerson.marini, Oct 13 '14 at 16:28
Possible but I tried that method and it didn't work for me unfortunately. — SearchForKnowledge, Oct 13 '14 at 16:41

score 1 · Answer 1 · answered Oct 13 '14 at 17:26

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

score 0 · Answer 2 · answered Oct 13 '14 at 17:10

0

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.

answered Oct 13 '14 at 17:10

Arbel

30,599
2
28
29

The "..." is positioned all the way to the right... Almost have it working. Thank you. Anyway to show it right after the letters ONLY if it doesn't fit. – SearchForKnowledge Oct 13 '14 at 17:18
1

You will need to adjust it to fit your needs, this is a basic suggestion to give you a starting point. – Arbel Oct 13 '14 at 17:19

score 0 · Answer 3 · answered Oct 13 '14 at 19:10

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.

Thank you. I will tweak it up :) – SearchForKnowledge Oct 13 '14 at 19:21 — SearchForKnowledge, Oct 13 '14 at 19:21

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

3 Answers3

Linked