ellipsis mixin/placeholder

ellipsis.scss

// Mixin for creating a ellipsis (...) when text is too long.
// Only call the mixin within media querys, otherwise use the placeholder!

@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

%ellipsis {
  @include ellipsis;
}

// usage
.notification {
  width: 100%;
  height: 50px;
  line-height: 50px;
  
  p { @extend %ellipsis }
}

markup.html

<div class="notification">
  <p>This is a longer text that ellipses(!?) when it get's cut!</p>
</div>