Truncating text

Sometimes, you have a situation where, if space is limited, you would rather have text truncated rather than wrapped. We've been trained to spot this with the ellipsis symbol "...".

This is straightforward in CSS, even if a little long-winded.

Consider this markup (you can view this example in example_11-03):

<p class="truncate">
  OK, listen up, I've figured out the key eternal happiness. All you need to do is eat lots of scones.
</p>

However, we actually want to truncate the text to be 520px wide, so it looks like this:

Figure 11.3: Truncation is handy when keeping vertical height constant is of paramount importance

Here is the CSS to make that happen:

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

Each one of those properties is needed to make the truncation occur.

You can read the specification for the text-overflow property...