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

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.

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

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.