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/utilities/text/ellipsis"

View the Source for this module on Github.

Imports

The following sass files are automatically imported when you import this file:

1. CSS3 Utilities

Configurable Variables help

$use-mozilla-ellipsis-binding

Value

false

Description

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

compass install compass/ellipsis

Mixins

ellipsis($no-wrap)

=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")); } }