p0c-website

Proof of concepts for fun and profit
git clone https://git.in0rdr.ch/p0c-website.git
Log | Files | Refs | Pull requests |Archive | README | LICENSE

_ellipsis.scss (669B)


      1 @charset "UTF-8";
      2 
      3 /// Truncates text and adds an ellipsis to represent overflow.
      4 ///
      5 /// @param {Number} $width [100%]
      6 ///   Max-width for the string to respect before being truncated
      7 ///
      8 /// @example scss - Usage
      9 ///   .element {
     10 ///     @include ellipsis;
     11 ///   }
     12 ///
     13 /// @example css - CSS Output
     14 ///   .element {
     15 ///     display: inline-block;
     16 ///     max-width: 100%;
     17 ///     overflow: hidden;
     18 ///     text-overflow: ellipsis;
     19 ///     white-space: nowrap;
     20 ///     word-wrap: normal;
     21 ///   }
     22 
     23 @mixin ellipsis($width: 100%) {
     24   display: inline-block;
     25   max-width: $width;
     26   overflow: hidden;
     27   text-overflow: ellipsis;
     28   white-space: nowrap;
     29   word-wrap: normal;
     30 }