Insert ellipsis (...) into HTML tag if content too wide

The following CSS only solution for truncating text on a single line works with all browers listed at http://www.caniuse.com as of writing with the exception of Firefox 6.0. Note that JavaScript is totally unnecessary unless you need to support wrapping multiline text or earlier versions of Firefox.

.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; } 

If you need support for earlier versions of Firefox check out my answer on this other question.

I built this code using a number of other posts, with the following enhancements:

1. It uses a binary search to find the text length that is just right.
2. It handles cases where the ellipsis element(s) are initially hidden by setting up a one-shot show event that re-runs the ellipsis code when the item is first displayed. This is handy for master-detail views or tree-views where some items aren't initially displayed.
3. It optionally adds a title attribute with the original text for a hoverover effect.
4. Added display: block to the style, so spans work
5. It uses the ellipsis character instead of 3 periods.
6. It auto-runs the script for anything with the .ellipsis class

CSS:

.ellipsis { white-space: nowrap; overflow: hidden; display: block; } .ellipsis.multiline { white-space: normal; } 

jquery.ellipsis.js

(function ($) { // this is a binary search that operates via a function // func should return < 0 if it should search smaller values // func should return > 0 if it should search larger values // func should return = 0 if the exact value is found // Note: this function handles multiple matches and will return the last match // this returns -1 if no match is found function binarySearch(length, func) { var low = 0; var high = length - 1; var best = -1; var mid; while (low <= high) { mid = ~ ~((low + high) / 2); //~~ is a fast way to convert something to an int var result = func(mid); if (result < 0) { high = mid - 1; } else if (result > 0) { low = mid + 1; } else { best = mid; low = mid + 1; } } return best; } // setup handlers for events for show/hide $.each(["show", "toggleClass", "addClass", "removeClass"], function () { //get the old function, e.g. $.fn.show or $.fn.hide var oldFn = $.fn[this]; $.fn[this] = function () { // get the items that are currently hidden var hidden = this.find(":hidden").add(this.filter(":hidden")); // run the original function var result = oldFn.apply(this, arguments); // for all of the hidden elements that are now visible hidden.filter(":visible").each(function () { // trigger the show msg $(this).triggerHandler("show"); }); return result; }; }); // create the ellipsis function // when addTooltip = true, add a title attribute with the original text $.fn.ellipsis = function (addTooltip) { return this.each(function () { var el = $(this); if (el.is(":visible")) { if (el.css("overflow") === "hidden") { var content = el.html(); var multiline = el.hasClass('multiline'); var tempElement = $(this.cloneNode(true)) .hide() .css('position', 'absolute') .css('overflow', 'visible') .width(multiline ? el.width() : 'auto') .height(multiline ? 'auto' : el.height()) ; el.after(tempElement); var tooTallFunc = function () { return tempElement.height() > el.height(); }; var tooWideFunc = function () { return tempElement.width() > el.width(); }; var tooLongFunc = multiline ? tooTallFunc : tooWideFunc; // if the element is too long... if (tooLongFunc()) { var tooltipText = null; // if a tooltip was requested... if (addTooltip) { // trim leading/trailing whitespace // and consolidate internal whitespace to a single space tooltipText = $.trim(el.text()).replace(/\s\s+/g, ' '); } var originalContent = content; var createContentFunc = function (i) { content = originalContent.substr(0, i); tempElement.html(content + "…"); }; var searchFunc = function (i) { createContentFunc(i); if (tooLongFunc()) { return -1; } return 0; }; var len = binarySearch(content.length - 1, searchFunc); createContentFunc(len); el.html(tempElement.html()); // add the tooltip if appropriate if (tooltipText !== null) { el.attr('title', tooltipText); } } tempElement.remove(); } } else { // if this isn't visible, then hook up the show event el.one('show', function () { $(this).ellipsis(addTooltip); }); } }); }; // ellipsification for items with an ellipsis $(document).ready(function () { $('.ellipsis').ellipsis(true); }); } (jQuery)); 

Here is a pure CSS approach I found here: http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

.truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

It works well.

My answer only supports single line text. Check out gfullam's comment below for the multi-line fork, it looks pretty promising.

I rewrote the code from the first answer a few times, and I think this should be the fastest.

It first finds an "Estimated" text length, and then adds or removes a character until the width is correct.

The logic it uses is shown below:

After an "estimated" text length is found, characters are added or removed until the desired width is reached.

I'm sure it needs some tweaking, but here's the code:

(function ($) { $.fn.ellipsis = function () { return this.each(function () { var el = $(this); if (el.css("overflow") == "hidden") { var text = el.html().trim(); var t = $(this.cloneNode(true)) .hide() .css('position', 'absolute') .css('overflow', 'visible') .width('auto') .height(el.height()) ; el.after(t); function width() { return t.width() > el.width(); }; if (width()) { var myElipse = "...."; t.html(text); var suggestedCharLength = (text.length * el.width() / t.width()) - myElipse.length; t.html(text.substr(0, suggestedCharLength) + myElipse); var x = 1; if (width()) { while (width()) { t.html(text.substr(0, suggestedCharLength - x) + myElipse); x++; } } else { while (!width()) { t.html(text.substr(0, suggestedCharLength + x) + myElipse); x++; } x--; t.html(text.substr(0, suggestedCharLength + x) + myElipse); } el.html(t.html()); t.remove(); } } }); }; })(jQuery); 

I'd done something similar for a client recently. Here's a version of what I did for them (example tested in all latest browser versions on Win Vista). Not perfect all around the board, but could be tweaked pretty easily.

Demo: http://enobrev.info/ellipsis/

Code:

<html> <head> <script src="http://www.google.com/jsapi"></script> <script> google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { $('.longtext').each(function() { if ($(this).attr('scrollWidth') > $(this).width()) { $more = $('<b class="more">&hellip;</b>'); // add it to the dom first, so it will have dimensions $(this).append($more); // now set the position $more.css({ top: '-' + $(this).height() + 'px', left: ($(this).attr('offsetWidth') - $more.attr('offsetWidth')) + 'px' }); } }); }); </script> <style> .longtext { height: 20px; width: 300px; overflow: hidden; white-space: nowrap; border: 1px solid #f00; } .more { z-index: 10; position: relative; display: block; background-color: #fff; width: 18px; padding: 0 2px; } </style> </head> <body> <p class="longtext">This is some really long text. This is some really long text. This is some really long text. This is some really long text.</p> </body> </html> 

Well, one simple solution, that doesn't quite add the "...", but does prevent the <h2> from breaking into two lines would be to add this bit of css:

h2 { height:some_height_in_px; /* this is the height of the line */ overflow:hidden; /* so that the second (or third, fourth, etc.) line is not visible */ } 

I gave it some more thought, and I came up with this solution, you have to wrap the textual contents of your h2 tag with another tag (e.g. a span) (or alternatively wrap the h2s with something that has the given height) and then you can use this sort of javascript to filter out the unneeded words:

var elems = document.getElementById('conainter_of_h2s'). getElementsByTagName('h2'); for ( var i = 0, l = elems.length; i < l; i++) { var span = elems.item(i).getElementsByTagName('span')[0]; if ( span.offsetHeight > elems.item(i).offsetHeight ) { var text_arr = span.innerHTML.split(' '); for ( var j = text_arr.length - 1; j>0 ; j--) { delete text_arr[j]; span.innerHTML = text_arr.join(' ') + '...'; if ( span.offsetHeight <= elems.item(i).offsetHeight ){ break; } } } } 

There's a solution for multi-line text with pure css. It's called line-clamp, but it only works in webkit browsers. There is however a way to mimic this in all modern browsers (everything more recent than IE8.) Also, it will only work on solid backgrounds because you need a background-image to hide the last words of the last line. Here's how it goes:

Given this html:

<p class="example" id="example-1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 

Here's the CSS:

p { position:relative; line-height:1.4em; height:4.2em; /* 3 times the line-height to show 3 lines */ } p::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 20px 1px 45px; background:url(ellipsis_bg.png) repeat-y; } 

ellipsis_bg.png being an image of the same color of your background, that would be about 100px wide and have the same height as your line-height.

It's not very pretty, as your text may be cut of in the middle of a letter, but it may be useful in some cases.

Reference: http://www.css-101.org/articles/line-clamp/line-clamp_for_non_webkit-based_browsers.php

Pure CSS Multi-line Ellipsis for text content:

.container{ position: relative; /* Essential */ background-color: #bbb; /* Essential */ padding: 20px; /* Arbritrary */ } .text { overflow: hidden; /* Essential */ /*text-overflow: ellipsis; Not needed */ line-height: 16px; /* Essential */ max-height: 48px; /* Multiples of line-height */ } .ellipsis { position: absolute;/* Relies on relative container */ bottom: 20px; /* Matches container padding */ right: 20px; /* Matches container padding */ height: 16px; /* Matches line height */ width: 30px; /* Arbritrary */ background-color: inherit; /* Essential...or specify a color */ padding-left: 8px; /* Arbritrary */ }

<div class="container"> <div class="text"> Lorem ipsum dolor sit amet, consectetur eu in adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat. </div> <div class="ellipsis">...</div> </div>

Please checkout the snippet for a live example.

This is similar to Alex's but does it in log time instead of linear, and takes a maxHeight parameter.

jQuery.fn.ellipsis = function(text, maxHeight) { var element = $(this); var characters = text.length; var step = text.length / 2; var newText = text; while (step > 0) { element.html(newText); if (element.outerHeight() <= maxHeight) { if (text.length == newText.length) { step = 0; } else { characters += step; newText = text.substring(0, characters); } } else { characters -= step; newText = newText.substring(0, characters); } step = parseInt(step / 2); } if (text.length > newText.length) { element.html(newText + "..."); while (element.outerHeight() > maxHeight && newText.length >= 1) { newText = newText.substring(0, newText.length - 1); element.html(newText + "..."); } } }; 

There is a simple jQuery solution by Devon Govett:

https://gist.github.com/digulla/5796047

To use, just call ellipsis() on a jQuery object. For example:

$("span").ellipsis(); 

I rewrote Alex's function to use to the MooTools library. I changed it a bit to word jump rather than add the ellipsis in the middle of a word.

Element.implement({ ellipsis: function() { if(this.getStyle("overflow") == "hidden") { var text = this.get('html'); var multiline = this.hasClass('multiline'); var t = this.clone() .setStyle('display', 'none') .setStyle('position', 'absolute') .setStyle('overflow', 'visible') .setStyle('width', multiline ? this.getSize().x : 'auto') .setStyle('height', multiline ? 'auto' : this.getSize().y) .inject(this, 'after'); function height() { return t.measure(t.getSize).y > this.getSize().y; }; function width() { return t.measure(t.getSize().x > this.getSize().x; }; var func = multiline ? height.bind(this) : width.bind(this); while (text.length > 0 && func()) { text = text.substr(0, text.lastIndexOf(' ')); t.set('html', text + "..."); } this.set('html', t.get('html')); t.dispose(); } } }); 

I was a bit surprised by the behavior of the css though.

var cssEllipsis = { "width": "100%","display": "inline-block", "vertical-align": "middle", "white-space": "nowrap", "overflow": "hidden", "text-overflow": "ellipsis" }; 

Unless I provided the width to the control to which i needed to bind the ellipsis didn't suppost my cause. Is width a must property to be added ??? Please put your thoughts.

DO THE ELLIPSIS USING ONLY CSS

<html> <head> <style type="text/css"> #ellipsisdiv { width:200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div id="ellipsisdiv"> This content is more than 200px and see how the the ellipsis comes at the end when the content width exceeds the div width. </div> </body> </html> 

*This code works on most current browsers. If you experience any problem with Opera and IE (which probably you won't), add these in the style:

-o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; 

* This feature is part of CSS3. Its complete syntax is:

text-overflow: clip|ellipsis|string; 

Here is a nice widget/plugin library which has ellipsis built in: http://www.codeitbetter.co.uk/widgets/ellipsis/ All you need to do it reference the library and call the following:

<script type="text/javascript"> $(document).ready(function () { $(".ellipsis_10").Ellipsis({ numberOfCharacters: 10, showLessText: "less", showMoreText: "more" }); }); </script> <div class="ellipsis_10"> Some text here that's longer than 10 characters. </div> 

you can do this much easier with css only, for example : sass mode

.truncatedText { font-size: 0.875em; line-height: 1.2em; height: 2.4em; // 2 lines * line-height &:after { content: " ..."; } } 

and you have ellipsis ;)

Just like @acSlater I couldn't find something for what I needed so I rolled my own. Sharing in case anyone else can use:

ellipsisIfNecessary(mystring,maxlength); 

trimmedString = ellipsisIfNecessary(mystring,50); 

<html> <head> <!-- By Warren E. Downs, copyright 2016. Based loosely on a single/multiline JQuery using example by Alex, but optimized to avoid JQuery, to use binary search, to use CSS text-overflow: ellipsis for end, and adding marquee option as well. Credit: Marquee: http://jsfiddle.net/jonathansampson/xxuxd/ JQuery version: http://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide (by Alex, http://stackoverflow.com/users/71953/alex) (Improved with Binary Search as suggested by StanleyH, http://stackoverflow.com/users/475848/stanleyh) --> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <style> .single { overflow:hidden; white-space: nowrap; width: 10em; padding: 10px; margin: 0 auto; border: solid 1px blue; } .multiline { overflow: hidden; white-space: wrap; width: 10em; height: 4.5em; padding: 10px; margin: 0 auto; border: solid 1px blue; } .marquee { overflow: hidden; width: 40em; padding: 10px; margin: 0 auto; border: solid 1px blue; } </style> <script> var _marqueeNumber=0; // mode=start,end,middle function clipText(text, len, mode) { if(!mode) { mode="end"; } else { mode=mode.toLowerCase(); } if(mode == "start") { return "&hellip;"+clipText(text,len,"_start"); } if(mode == "_start") { return text.substr(text.length - len); } if(mode == "middle") { return clipText(text, len/2, "end") + clipText(text, len/2, "_start"); } return text.substr(0, len) + "&hellip;"; } function generateKeyframes(clsName, start, end) { var sec=5; var totalLen=parseFloat(start)-parseFloat(end); if(start.indexOf('em') > -1) { sec=Math.round(totalLen/3); } else if(start.indexOf('px') > -1) { sec=Math.round(totalLen/42); } var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = 'body {}'; document.getElementsByTagName('head')[0].appendChild(style); this.stylesheet = document.styleSheets[document.styleSheets.length-1]; try { this.stylesheet.insertRule('.'+clsName+' {\n'+ ' animation: '+clsName+' '+sec+'s linear infinite;\n'+ '}\n', this.stylesheet.rules.length); this.stylesheet.insertRule('.'+clsName+':hover {\n'+ ' animation-play-state: paused\n'+ '}\n', this.stylesheet.rules.length); this.stylesheet.insertRule('@keyframes '+clsName+' {\n'+ ' 0% { text-indent: '+start+' }\n'+ ' 100% { text-indent: '+end+' }\n'+ '}', this.stylesheet.rules.length); } catch (e) { console.log(e.message); } } function addClone(el, multiline, estyle) { if(!estyle) { try { estyle=window.getComputedStyle(el); } catch(e) { return null; } } var t = el.cloneNode(true); var s=t.style; //s.display='none'; s.visibility='hidden'; // WARNING: Infinite loop if this is not hidden (e.g. while testing) s.display='inline-block'; s.background='black'; s.color='white'; s.position='absolute'; s.left=0; s.top=0; s.overflow='visible'; s.width=(multiline ? parseFloat(estyle.width) : 'auto'); s.height=(multiline ? 'auto' : parseFloat(estyle.height)); el.parentNode.insertBefore(t, el.nextSibling); return t; } function getTextWidth(el, multiline) { var t=addClone(el, multiline); if(!t) { return null; } var ts=window.getComputedStyle(t); var w=ts.width; if(multiline) { var es=window.getComputedStyle(el); var lines=Math.round(parseInt(ts.height)/parseInt(es.height))*2+0.5; w=w+''; var unit=''; // Extract unit for(var xa=0; xa<w.length; xa++) { var c=w[xa]; if(c <= '0' || c >= '9') { unit=w.substr(xa-1); } } w=parseFloat(w); w*=lines; // Multiply by lines w+=unit; // Append unit again } t.parentNode.removeChild(t); return w; } // cls=class of element to ellipsize // mode=start,end,middle,marq (scrolling marquee instead of clip) function ellipsis(cls, mode) { mode=mode.toLowerCase(); var elems=document.getElementsByClassName(cls); for(xa in elems) { var el=elems[xa]; var multiline = el.className ? el.className.indexOf('multiline') > -1 : true; if(mode == "marq") { var w=getTextWidth(el, multiline); if(!w) { continue; } var mCls="dsmarquee"+(_marqueeNumber++); var es=window.getComputedStyle(el); generateKeyframes(mCls,es.width, '-'+w); el.className+=" "+mCls; continue; } if(mode == "end" && !multiline) { el.style.textOverflow="ellipsis"; continue; } var estyle=null; try { estyle=window.getComputedStyle(el); } catch(e) { continue; } if(estyle.overflow == "hidden") { var text = el.innerHTML; var t=addClone(el, multiline, estyle); function height() { var ts=window.getComputedStyle(t); var es=window.getComputedStyle(el); return parseFloat(ts.height) - parseFloat(es.height); } function width() { var ts=window.getComputedStyle(t); var es=window.getComputedStyle(el); return parseFloat(ts.width) - parseFloat(es.width); } var tooLong = multiline ? height : width; var len=text.length; var diff=1; var olen=0; var jump=len/2; while (len > 0) { var diff=tooLong(); if(diff > 0) { len-=jump; jump/=2; } else if(diff < 0) { len+=jump; } len=Math.round(len); //alert('len='+len+';olen='+olen+';diff='+diff+';jump='+jump+';t='+JSON.stringify(t.innerHTML)); t.innerHTML=clipText(text, len, mode); if(olen == len) { break; } olen=len; } el.innerHTML=t.innerHTML; t.parentNode.removeChild(t); } //break; t.style.visibility='hidden'; } } function testHarness() { ellipsis('ellipsis1', 'start'); ellipsis('ellipsis2', 'end'); ellipsis('ellipsis3', 'middle'); ellipsis('marquee', 'marq') } </script> </head> <body onload="testHarness()"> <div class="single ellipsis1" style="float:left">some long text that should be clipped left</div> <div class="single ellipsis2" style="float:right">right clip long text that should be clipped</div> <div class="single ellipsis3" style="float:center">some long text that should be clipped in the middle</div> <br /> <p class="single marquee">Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p> &nbsp; <br /> <div class="multiline ellipsis1" style="float:left">Test test test test test test, some more long text, such as asdasdasdasdasd, that should be multiline clipped left(*)</div> <div class="multiline ellipsis2" style="float:right">right clip multiline long text, such as Test test test test test test, and some more long text that should be multiline clipped right.</div> <div class="multiline ellipsis3" style="float:center">Test test test test test test, some more long text, such as asdasdasdasdasd, that should be multiline clipped in the middle(*)</div> <br /> <p class="multiline marquee">Multiline Marquee: Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p> &nbsp; </body> </html>