2d3ca553 |
1 | @charset "UTF-8"; |
2 | |
3 | /// Truncates text and adds an ellipsis to represent overflow. |
4 | /// |
5 | /// @argument {number} $width [100%] |
6 | /// The `max-width` for the string to respect before being truncated. |
7 | /// |
8 | /// @argument {string} $display [inline-block] |
9 | /// Sets the display-value of the element. |
10 | /// |
11 | /// @example scss |
12 | /// .element { |
13 | /// @include ellipsis; |
14 | /// } |
15 | /// |
16 | /// // CSS Output |
17 | /// .element { |
18 | /// display: inline-block; |
19 | /// max-width: 100%; |
20 | /// overflow: hidden; |
21 | /// text-overflow: ellipsis; |
22 | /// white-space: nowrap; |
23 | /// word-wrap: normal; |
24 | /// } |
25 | |
26 | @mixin ellipsis( |
27 | $width: 100%, |
28 | $display: inline-block |
29 | ) { |
30 | display: $display; |
31 | max-width: $width; |
32 | overflow: hidden; |
33 | text-overflow: ellipsis; |
34 | white-space: nowrap; |
35 | word-wrap: normal; |
36 | } |