Gerillass 2.0.0 is out. It renames every utility function and replaces two mixins with one, so read the migration guide before you upgrade.
Gerillass
v2.3.1* You can call mixins with or without the gls- namespace (e.g. @include gls-ellipsis();).
The Ellipsis Sass mixin helps you truncate text and add an ellipsis at the end of it, based on the given $width value.
Arguments
| Name | Type | Description |
|---|---|---|
$width (100%) | number <br/>(with unit) | The max-width of the selected element before its text is truncated. Accepts a length or a percentage, none, min-content, max-content, fit-content, stretch, a CSS-wide keyword, var(), a maths function such as min(), and anchor-size(). Not auto, which max-width does not take. |
$display (inline-block) | string | Sets the display property of the selected elements. The default value is inline-block. Accepts a display keyword, or two or three in any order, such as inline flex, as long as they name at most one outer type, one inner type and list-item. A vendor keyword such as -webkit-box, a CSS-wide keyword and var() work too, and null leaves display out. |
Examples
Simply call the mixin inside an element's selector to truncate the text in it.
.element{
@include ellipsis;
}.element {
display: inline-block;
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
word-wrap: normal;
}Change the $width or $display values if you need to.
.element{
@include ellipsis(
$width: 200px,
$display: block
);
}.element {
display: block;
max-width: 200px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
word-wrap: normal;
}What it refuses
A $display the browser drops stops the build. Measured in Chrome 152, that is a word that is not a display keyword, and a combination of keywords that names two of a kind, such as block inline or flex grid. Until 2.3.1 both compiled, and a quoted value such as "block" kept its quotes and was dropped as well; it is now written without them.
.element {
@include ellipsis(100%, block inline);
}Error: `block inline` is not a valid $display for `ellipsis`: it names two outer display types; pass one of block, inline or run-in. A browser drops the declaration.A $width the browser drops stops the build as well. Measured in Chrome 152, max-width drops auto, a word that is not a sizing keyword, a unitless number other than 0, a negative length and a length in quotes. Until 2.3.1 these compiled, and the element was left with no width limit.
.element {
@include ellipsis(auto);
}Error: `auto` is not a valid $width for `ellipsis`, which sets max-width: it is not a length or one of: min-content, max-content, fit-content, stretch, -webkit-fill-available, -moz-available, none. A browser drops the declaration.