Ellipsis

Type: Mixin

@include ellipsis();

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

Ellipsis Sass mixin helps you to truncate a text and adds an ellipsis at the end of it based on the given $width value.

Github Source Code

Arguments

Name	Type	Description
`$width (100%)`	`number (with unit)`	The `max-width` of the selected element before beign truncated.
`$display (inline-block)`	`string`	Sets the value of the `display` property of the selected element(s) to `inline-block`.

Examples

Simply call the mixin in an element to truncate the text inside of it.

.element{
  @include ellipsis;
}

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

Change the $width or $display values of the selected element(s) if you need to.

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

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