Ellipse My Text…

by Kyle Simpson

You may be starting to notice a trend from my recent articles here on HTML5 Hub. I’m a JS snob by trade, but by association I have to deal with my fair share of CSS issues. So, as an “outsider” looking in, I’m taking this opportunity to highlight some of the big “pain points” that CSS causes for various basic tasks in web dev. It’s not really intended as a criticism of the technology per se, but more a rallying cry to ask for standard solutions which remove our hacks.

More Text, Less Text

If you’re a prolific (and overly verbose) writer like I am, you’re probably very familiar with writing too much to fit in the space you’re given to present it. Sometimes you want to manually truncate your own text, but more often, you’d probably just like the presentation platform to automatically take care of this for you.

Many people call this “elision” (verb: “elide”), when you shorten your text, and put those little dots after it. Turns out that’s not quite correct. Elide actually means to omit part of a word (syllable, etc) in verbal pronunciation, such as “o’er” instead of “over”.

The “…” is called an ellipsis and the verb form (according to Wiktionary) is ellipse (no, not just the geometric shape!).

With the explosion of responsive-layout obsession around the web these days, the amount of space your text lives in has never been more dynamic (subject to change). More than ever before, we need good ways of signaling to a reader that there’s more (text) than meets the eye.

I’m not going to cover why or why not you choose to ellipse your text. That to me is an orthogonal question. I’m just assuming here you have good UI/UX reason to do so, and so let’s address how you do it.

Let’s quickly take a look at how we currently can accomplish this task, and possibly how we should be able to do it.


First, there’s the manual way. I’m typing along, and I realize that I want to convey that something continues or is paused, so I just … dot3x myself.

This is obviously the least flexible way, because you manually calculate where you want to put those dots (aka, periods), and that can’t be adjusted if you have more or less space available.

JS to the rescue?

A variation of this technique is when you use JavaScript to ellipse your text. For instance:

function shorten(text, maxLength) {
    var ret = text;
    if (ret.length > maxLength) {
        ret = ret.substr(0,maxLength-3) + "...";
    return ret;

Again, you’re basically making assumptions about the length of the text relating to its visible dimensions. The assumptions sometimes work out, but more often than not, it’s not quite gonna cut it.

Note: For brevity I won’t cover it in detail, but you can devise a JS algorithm that attempts to layout text in an element, and tries to manually truncate the text one character at a time until you no longer have any overflow (have to examine the dimensions of the text element as compared to its container), then you’ve decided how many characters can appear, then call something like the shorten I show above. While these elaborate techniques are a bit more complicated to implement, they do at least reduce some of the assumptions, but they are still brittle to changes in container dimension (have to re-calculate each time!)


Instead of putting in 3 separate “.” characters, you can (and probably should!) insert the ellipsis character itself, as an HTML entity: …… The advantage is that this single character is a bit more predictable in terms of size, and as an HTML entity, its display is more consistent across fonts and font-sizes (which should make your calculations a little easier).

But this is still largely manual ellipsing, so the above caveats apply.


Quite awhile back, CSS added a feature to the text-overflow functionality that has CSS basically do what I suggested, which is automatically figure out how much text can be shown, and truncate with an ellipsis.

This sounds like the ideal solution, until we consider some of the caveats.

For one, you also have to specifically control the overflow of the parent container. It stands to reason that if the overflow:visible (or overflow:scroll is applied, there’s no point in truncating/ellipsing the text. So, you have to pick hidden or clip so that there’s a reason to ellipse. But it is a little annoying that you have to specify both overflow and text-overflow.

Also, the parent element has to have a specific width, or at least a max-width. It can’t be shrink-wrapped around your text content and growing without bounds, or again, it would be nonsensical to also ellipse text.

Lastly, and worst of all,text-overflow:ellipsis only works on a single line of text. That is, you can’t simultaneously have the text wrap to subsequent linesand have it ellipse at the end of the last line.

Bummer, because that’s exactly what you’d probably want, like for instance displaying news items or tweets in a compact space, you’d want to show the first 2 lines and then ellipse the rest, possibly to reveal on hover or on click.


Opera has had (cue sad-face) -o-ellipsis-lastline, which would have been awesome. For some reason, that never became standard, and I guess now it’s been abandoned. Oh well, it was nice while it lasted.

Then there’s the webkit-only tricks which use something they call (-webkit-)line-clamp.

Finally, a rather clever but elaborate workaround where you truncate text but then use a ::after pseudo-class to insert your at the end, and only if the text would have overflowed, has been demonstrated as possible.

But there’s simply no question that these things are unfortunate (proprietary) and/or hacky.


Can we please come up with something better? What about standardizing Opera’s idea?

Or, what about:

#parent { overflow:hidden; text-overflow-multiline:ellipsis; }
<div id="parent">text here that goes onto multiple lines but should be cut off</div>

As always, what do you think? Am I crazy, or couldn’t this be a simple task that we standardize into some feature instead of hacking around?

Tell us what you think!?

For more complete information about compiler optimizations, see our Optimization Notice.