Source on Github

Truncating Text with Ellipses

There is an XML file that must be installed into your stylesheet directory in order for this utility to work correctly. To install it:

compass install compass/ellipsis

This file can be imported using: @import "compass/typography/text/ellipsis"

Imports

  1. Shared Utilities

Configurable Variables help

false

To get full firefox support, you must install the ellipsis pattern:

compass install compass/ellipsis

Mixins

view source 

=ellipsis($no-wrap: true)
  @if $no-wrap
    white-space: nowrap
  overflow: hidden
  +experimental(text-overflow, ellipsis, not -moz, not -webkit, -o, -ms, not -khtml, official)
  @if $experimental-support-for-mozilla and $use-mozilla-ellipsis-binding
    -moz-binding: stylesheet-url(unquote("xml/ellipsis.xml#ellipsis"))

@mixin ellipsis($no-wrap: true) {
  @if $no-wrap {
    white-space: nowrap;
  }
  overflow: hidden;
  @include experimental(text-overflow, ellipsis, not -moz, not -webkit, -o, -ms, not -khtml, official);
  @if $experimental-support-for-mozilla and $use-mozilla-ellipsis-binding {
    -moz-binding: stylesheet-url(unquote("xml/ellipsis.xml#ellipsis"));
  }
}

This technique, by Justin Maxwell, was originally published here. Firefox implementation by Rikkert Koppes.