Ellipsis mixin for SCSS

This mixin will style text as if it has been truncated by an ellipsis symbol. The text will overflow the element's bounds if it is not hidden, and white-space will be preserved.

Shortcut: scss.mixin.ellipsis

@mixin ellipsis($numOfLines: 1) {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  
  @supports (-webkit-line-clamp: $numOfLines) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    display: -webkit-box;
    -webkit-line-clamp: $numOfLines;
    -webkit-box-orient: vertical;
  }
}