_ellipsis.scss 669 B

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