Not everything needs to be visible all of the time. Specifically in list views (when clicking through will give you the entire contents, anyway), learn the amazing freedom that you can experience by enforcing constraints. This is becoming more and more necessary with the prevalence of mobile devices and their smaller screen dimensions. When you have a user that tends to write an entire paragraph in the box labeled “title”, you can fill up an entire iPhone screen with just half of one page title. Enter the “ellipsis”. This little three-dot piece of magic can help you retain an elegant design, with a not-so-elegant chunk of text.

Using the ellipsis, you can constrain your text to a certain area and, rather than simply cutting off your text mid-letter, you can cut it off to the nearest letter and add an ellipsis to the end. This is difficult to describe in words, but easy to show in examples.

For example, you might have this as an <h2> tag in a list:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet, neque eu semper lobortis, nisi ante volutpat risus, a congue elit est et ipsum. Aenean laoreet justo et enim malesuada ultrices. Phasellus augue quam, placerat et consectetur at, eleifend ut eros. Sed luctus porta urna, id semper orci lacinia ut. Etiam sagittis placerat augue at molestie. Quisque scelerisque fringilla pharetra. Praesent nibh erat, mollis id faucibus at, semper et diam. Sed metus metus, hendrerit sed eleifend quis, bibendum eget leo.

Omigosh. So ugly. However, simply add this to your css:

.ellipsis-class { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

Then it doesn’t matter how long the text is, it will be constrained to a single line with an appended ellipsis like so:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet, neque eu semper lobortis, nisi ante volutpat risus, a congue elit est et ipsum. Aenean laoreet justo et enim malesuada ultrices. Phasellus augue quam, placerat et consectetur at, eleifend ut eros. Sed luctus porta urna, id semper orci lacinia ut. Etiam sagittis placerat augue at molestie. Quisque scelerisque fringilla pharetra. Praesent nibh erat, mollis id faucibus at, semper et diam. Sed metus metus, hendrerit sed eleifend quis, bibendum eget leo.

*Whew*… much better. Here is a breakdown of what that CSS does:

  • white-space: nowrap; tells the browser not to allow the text to wrap and to keep it on a single line.
  • overflow: hidden; tells the browser to hide all of the text that extends beyond the bounds of the element. Without this, you would see your text extend the whole way off the side of the page.
  • text-overflow: ellipsis; tells the browser to append an ellipsis if the text extends beyond the bounds of the element.

And that’s all there is to it.

Comments

comments

Powered by Facebook Comments