Skip to content

Instantly share code, notes, and snippets.

@imlinus
Last active December 29, 2015 02:19
Show Gist options
  • Save imlinus/7599674 to your computer and use it in GitHub Desktop.
Save imlinus/7599674 to your computer and use it in GitHub Desktop.
ellipsis mixin/placeholder
// 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 }
}
<div class="notification">
<p>This is a longer text that ellipses(!?) when it get's cut!</p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment