Text truncating (line wrap) with CSS

Lately I’ve been struggling with the issue of truncating text on our sales management application pipejump.com.

It took me quite a time to solve this problem. I’ve tried server-side truncating, then javascripts, and finally found the ultimate solution - css styles.

The struggle

There is a list of deals’ names, that have to fit into boxes. Line wrapping is not possible here:

The idea was to cut deals’ names so that in each line they have the same maximum width. This makes the layout tidy and readable and lets us fit more information.

Server side solutions

My first attempt was to cut the text to 35 characters on the server side. That was a failure because 35-character long text can differ even twice in length, take a look:

The first one has less letters but is much wider. I had to try something else.

I thought that we need something on the browser’s side, which calculates width of fonts after they are rendered.

The javascript way

My second try was a javascript solution which counts the maximum possible text length and trims it. After half an hour I had a script that worked perfectly well with Firefox. Unfortunately it wasn’t 100% stable with Safari and IE. It was generating errors. There are some implementations on the internet that work cool, but there always are some issues.

The final solution – CSS

All in all I turned to css. Funny because I’m rather not a frontend guy. The main problem was that each browser treats text overflow in a different way. Finally, after some googling and experimenting I found a solution that works nice with Firefox, Internet Explorer6, Internet Explorer 7, Safari and Google Chrome. Here’s what you do.

Add a class to the truncated HTML element:

<span class="truncated someName">This is a very very long name that
may not fit somewhere because of its width</span>

Then define the classes. Shared .truncated class:

.truncated {
  overflow: hidden;
  text-overflow: ellipsis; /* this works with IE, Safari and Chrome */
  white-space: nowrap;
  -moz-binding: url('/ellipsis.xml#ellipsis'); /* this is a Firefox hack */
}

To make it work with Firefox you need to include a file called ellipsis.xml in your public folder. It should contain:

<?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>

To assign the truncated element some max-width, you need to make it a block object. Additionally, a little trick for Internet Explorer 6 is needed:

.truncated.someName {
  /* this is a IE6 hack for max-width: */
  width: expression(this.offsetWidth > 370 ? '370px' : true);
  /* this works for all other browsers: */
  max-width: 370px;
}

Truncated elements may behave a bit different in Firefox (due to the ellipsis.xml trick), so you might use FF-specific styles. To do that add a Firefox-only selector for them:

.someName, x:-moz-any-link {padding-top: 4px;}

where .someName is our designed selector and x:-moz-any-link is a hack that makes all other browsers drop the declaration.

Results?

Now you have pretty cut, same width elements with dots in all browsers, looks nice:)

You can check the result on PipeJump.com. Signing up takes half a minute.