| 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 | } |