With a strong emphasis these days on responsive websites it can be hard to deal with areas of text and squeezing them into areas on small mobile device can be tricky.

While a well thought out design that doesn’t require hiding / truncating certain elements is ideal, unfortunately this isn’t always the case and you may be restricted to a certain amount of space to fit some text.

Can’t I just use overflow: hidden?

Well, you can, however using the overflow property will cause any whole words that don’t fit in the area to drop to the next line which may be cut off completely. That, of course, can be fixed by using the white-space property (as below) which forces the text into a single line.

white-space: nowrap;

But there is still a problem!

Correct. Although the text is brought into one line we still have an issue, because part of words are being cut off which isn’t ideal and looks quite ugly.

So how do I fix it wise guy?

This where the text-overflow property comes in. Introduced in CSS3, this function will add ellipsis (also known as three dots …) to the word that is being cut off. This makes the line of text look a whole lot neater.

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

I am still looking to see if this can be used in a multiple line situation but currently it doesn’t work as is. Stay tuned for an update.

Privacy  |  Disclaimer