Sass CSS truncation mixin

mixin-css-truncate.scss

/// Truncate text mixin.
///
/// Expected usage: (visually) truncate text.
/// 
/// To avoid vertical alignment issues, we set the parent block to 
/// display: inline-flex; therefore call this mixin on a parent block.
///
/// @param     {keywords} $width ['300px']
///
/// @output    Sets rules for truncating text
///
@mixin truncate($width: 300px) {
  display: inline-flex;

  > * {
    display: inline-block;
    max-width: $width; // This could be any CSS unit… eg, em, %, etc.
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; // Change as desired.
  }
}