|
0
|
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
|
|
|
31 display: $display;
|
|
|
32 max-width: $width;
|
|
|
33 overflow: hidden;
|
|
|
34 text-overflow: ellipsis;
|
|
|
35 white-space: nowrap;
|
|
|
36 word-wrap: normal;
|
|
|
37 }
|
