CSS String Truncation with Ellipsis


Today’s article is brought to us by guest writer, Justin Maxwell. Justin will explain the technique he fine tuned for Mint.com to ellipsis text using just CSS. For more information about Justin see the end of this article.

Article updated on Aug. 21, 2013

Mozilla added support for CSS ellipsis in version 7.0, see the latest CSS.

---

In contemporary web application interfaces, areas for single-line, user-defined labels (strings) are common. For example, Mint.com allows customers to edit transaction descriptions and account names. Other popular web applications allow customization of photo titles, folder names, sections, and much more. A designer’s primary objective should be providing appropriate, optimal space for the expected content. The secondary objective should be elegantly handling the longer strings.

Truncation on the server-side is unnecessary, complicated, and usually confusing to the user. Luckily, CSS offers a combination of properties to truncate strings and add ellipsis (…) on the client-side, without JavaScript.

Example 1. Starting with the text

With no width restrictions, and no ellipsis, this paragraph (<p> tag) displays as one would expect…a big block of text. We’ve given it a some visual treatment to distinguish it as an interface element in these examples:

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.


But that’s not what we want. We’re looking for a single line, the sizing of which we can control in our interface.

Example 2. Prevent line wrap and bring on the ellipsis!

We’ll start by adding a class ".ellipsis" to the <p> tag and building it by example. Add white-space: nowrap, to limit the paragraph to a single line, and overflow: hidden keeps it from making the browser window wider. We then add width: 300px to limit the size (IE6 needs a width defined, even if it’s 100%) and begin constructing our label. Also, first recommended for CSS3 back in 2003[1], the CSS Text Module includes support for text-overflow: ellipsis. So putting that all together:
.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

p.block {
	width: 300px;
}

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.

And if it were as simple as that, this article wouldn’t be necessary. While the text-overflow: ellipsis property is supported in Internet Explorers 6 & 7, Safari 3 & 4, Chrome 1 &2, it requires special handling for IE 8 Standards Mode, Opera, and FireFox. [2]

Example 3. text-overflow in Opera and IE 8

Opera’s developers recognize that the text-overflow property isn’t part of the official spec yet, and distinguishes it as a proprietary property through the use of the -o prefix. Microsoft introduced something similar in IE 8 with the -ms prefix. So let’s add that:
.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
}

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.

Alright, alright, no more teasing. On to the goods. Let’s deal with the 400 lb. fox in the room.

Example 4. Making it work in FireFox

While implementation of the text-overflow property in FireFox is in development[3], it has been "in development" for a long time. But FireFox does support XUL, Mozilla’s XML User Interface Language[4]. While it may be the first time you’ve heard about it, many of the popular FireFox add-ons are written in, or rely on, XUL. XUL has a crop property for the description element, which specifies "An ellipsis will be used in place of the cropped text" [5].

And this is where Rikkert Koppes, a developer in The Netherlands, figured out how to put it all together[6]. Firefox’s support for XBL (XML Binding Language) allows us to "associate elements in a document with script, event handlers, CSS, and more complex content models, which can be stored in another document" [7]. So in this case, the other document is going to be our XUL description element with tail truncation (crop), which by default in XUL will have ellipsis, and the association will be through FireFox’s support of XBL bindings in CSS. First, we’ll create the XUL, which should be saved as ellipsis.xml:

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
	<binding id="ellipsis">
		<content>
			<xul:window>
				<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
			</xul:window>
		</content>
	</binding>
</bindings>

At Mint.com, we store this alongside our CSS directory in a folder named xml. You may wish to do the same. Then we tell our FireFox-only (-moz prefix) CSS to bind the .ellipsis class to the XUL:Description element’s described behavior, referenced by a unique ID (that binding id="ellipsis") in the XML code above:

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-moz-binding: url(assets/xml/ellipsis.xml#ellipsis);
}

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.

Success! If you don’t see it working on your site, double-check your path to the XML document in the CSS declaration.

That’s it, and some notes

CSS-based truncation offers much more flexibility to the designers, less work for the developers, and better information display for the user/customer. While we’d like to see native support for text-overflow in FireFox, even with a -moz prefix if needed, the XUL binding allows us to simulate it effectively with minor accessibility drawbacks.

Some notes:

Text selection in FireFox

You can’t select text that has had the XUL behavior bound to it. The -moz-user-select: text; property should allow this, but I haven’t had success with it, even inside the XUL as a style attribute.

Nested content in FireFox

You can nest a child node inside the cropped parent node as long as you bind the XUL behavior to it as well. Don’t go deeper than one child within the truncated node, and don’t use mixed content:

This is ok. This is ok. This is ok. This is ok. This is ok.


This is also ok. This is also ok. This is also ok. This is also ok.


This is not. This is not. This is not. This is not.


In the third example above, the <em> node will not display in FireFox. For more info, see Gunnar’s comment on Koppes’ original post[7].

CSS3’s incomplete draft

The last update of the W3C Working Draft for CSS Text states that "many sections intended for this module are not yet represented in this draft. In particular, the text-justify-trim, text-overflow, text-decoration, text-transformation, text-autospace, other properties have not yet been evaluated"[8] (emphasis added locally). So keep in mind you’re using a widely-supported but not officially recommended property; its future remains uncertain.

References:

  1. http://www.w3.org/TR/2003/CR-css3-text-20030514/
  2. http://www.quirksmode.org/css/contents.html
  3. https://bugzilla.mozilla.org/show_bug.cgi?id=312156
  4. https://developer.mozilla.org/En/XUL
  5. https://developer.mozilla.org/En/XUL/Description
  6. http://www.rikkertkoppes.com/thoughts/2008/6/
  7. http://www.w3.org/TR/xbl/
  8. http://www.w3.org/TR/css3-text/

--
Justin Maxwell is Mint.com’s "User Experience and Design Guru," working alongside Matt to create rich interactions and a holistic application experience. Before Mint, he spent four years at Apple, working with the Apple.com web team and the Pro Applications Design team. He designed and developed Apple’s first public uses of AJAX, Apple’s first AJAX libraries, and designed the first Apple.com product sites with dynamic content, including iTunes, iPod, iLife, and Mac OS X. His home-page on the inter-tube can be found at http://code404.com.

There’s more…

All the modern browsers now support ellipses: FireFox (since v7.0), Chrome (since v1.0), IE (since v6.0), Safari (since v1.3), Opera (since v9.0 with vendor prefix, v11.0 without). So the updated CSS for the .ellipses class is:

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;  // IE 6+, FF 7+, Op 11+, Saf 1.3+, Chr 1+
	-o-text-overflow: ellipsis;  // for Opera 9 & 10
}

References:

  1. text-overflow compatibility table
  2. Can I Use text-overflow