jQuery(function($) { $('.with-height-limit').each(function(index, node) { var $outer = $(this); // wrap all children $outer.wrapInner('<div />'); var $inner = $outer.children(); // get heights of them var outerHeight = $outer.height(); var innerHeight = $inner.height(); // show ellipsis if inner block is higher than outer if (innerHeight > outerHeight) { $('<span />', { "class": 'ellipsis', text: '…' }) .appendTo($outer); } }); });
<div class="text-overflow with-height-limit"> <p>This is a long long long long long long long long long long text</p> </div> <div class="text-overflow with-height-limit"> <p>This is a short text.</p> </div> <div class="text-overflow with-height-limit"> <p>This is an another long long long long long long long long long long text</p> </div>
.text-overflow { border: solid 1px #ccc; box-shadow: 1px 1px 4px rgba(0,0,0,.1) inset; line-height: 1.5em; margin: 1em; overflow: hidden; padding: 4px; position: relative; width: 200px; } .text-overflow .ellipsis { background-color: #fff; bottom: 0; position: absolute; right: 4px; } .with-height-limit { height: 3em; } h1 { font-weight: bold; } h1::after { content: ":" }