Gerillass: Ellipsis Sass Mixin

Ellipsis

Type: Mixin

@include ellipsis();

* You can call mixins with or without the gls- namespace (e.g. @include gls-ellipsis();).

The Ellipsis Sass mixin helps you truncate text and add an ellipsis at the end of it, based on the given $width value.

Name	Type	Description
`$width (100%)`	number <br/>(with unit)	The `max-width` of the selected element before its text is truncated.
`$display (inline-block)`	string	Sets the `display` property of the selected elements. The default value is `inline-block`.

Simply call the mixin inside an element's selector to truncate the text in it.

Sass

.element{
  @include ellipsis;
}

CSS

.element {
  display: inline-block;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  word-wrap: normal;
}

Result

Change the $width or $display values if you need to.

Sass

.element{
  @include ellipsis(
    $width: 200px,
    $display: block
  );
}

CSS

.element {
  display: block;
  max-width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  word-wrap: normal;
}

Result