Gerillass
v2.1.0* You can call mixins with or without the gls- namespace (e.g. @include gls-line-clamp();).
Ellipsis truncates one line. The Line Clamp Sass mixin truncates several, cutting the text off after the number of lines you give it and ending with an ellipsis.
It emits five declarations rather than one, because -webkit-line-clamp does nothing on its own. Leave one of the others out and the text is not clamped at all, and nothing warns you.
What each declaration is doing
Every combination below was tested on a paragraph running to five lines, clamped to three.
| What was applied | Result |
|---|---|
All three prefixed properties, plus overflow | 3 lines, with an ellipsis |
Without -webkit-box-orient: vertical | 5 lines, no clamping, no warning |
Without display: -webkit-box | 5 lines, the same |
The unprefixed line-clamp on its own | 5 lines. It is not Baseline yet |
Without overflow: hidden | The box is 3 lines, but the rest of the text spills out below it |
That last row is the one to watch for. Measuring the element's height reports three lines and looks correct; only looking at it shows the text escaping the box.
The unprefixed line-clamp is emitted alongside the prefixed trio. It does nothing today, as the fourth row shows, and it costs one line to be right when it ships.
Arguments
| Name | Type | Description |
|---|---|---|
$lines (3) | number | keyword | Accepts a whole number of lines, at least 1, or none to undo a clamp. |
Examples
Clamp an excerpt to three lines.
.excerpt {
@include line-clamp(3);
}.excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}Two lines, for a card title that must not push the card taller.
.title {
@include line-clamp(2);
}.title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}Without an argument the clamp is three lines.
.default {
@include line-clamp;
}.default {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}Pass none to undo a clamp, for instance when an excerpt expands on click.
.full {
@include line-clamp(none);
}.full {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: none;
line-clamp: none;
overflow: hidden;
}What it refuses
A clamp is a whole number of lines, so anything else stops the build.
.excerpt {
@include line-clamp(0);
}Error: `0` is not a valid $lines for `line-clamp`. Pass a whole number of lines that is at least 1, or `none` to undo a clamp..excerpt {
@include line-clamp(3px);
}Error: `3px` is not a valid $lines for `line-clamp`. Pass a whole number of lines, or `none` to undo a clamp.