Say we have a large paragraph of text that overruns its bounds. Or maybe we just don’t want to display the whole thing. There’s a neat way, using Compass, to remove the extra text and replace it with an ellipsis (…).

First, you need to install some small compass components using the compass command-line interface. After that, use the @includeellipsis command just like any other Compass mixin.

But...there’s a problem. This doesn’t work for all browsers. It works for Chrome, Safari, and early versions of Internet Explorer, but not for Opera or Firefox. Firefox claims support is coming in the future, but apparently this feature has been pending for a long time.^[13]

• Install the ellipsis file on the command line.

  ​	compass install compass/ellipsis

• Use the mixin in SCSS.

  compass/ellipses.scss
  ​	​@import​ ​"compass/typography/text/ellipsis"​;
  ​	.dotdotdot {
  ​	​@include​ ellipsis;
  ​	width: 500px; }

  This compiles to:

  ​	.dotdotdot {
  ​	white-space: nowrap;
  ​	overflow: hidden;
  ​	-o-text-overflow: ellipsis;
  ​	-ms-text-overflow: ellipsis;
  ​	text-overflow: ellipsis;
  ​	width: 500px; }

• See how it looks in Safari.