ellipsis.js 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = ellipsis;
  4. function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  5. /**
  6. * CSS to represent truncated text with an ellipsis. You can optionally pass a max-width and number of lines before truncating.
  7. *
  8. * @example
  9. * // Styles as object usage
  10. * const styles = {
  11. * ...ellipsis('250px')
  12. * }
  13. *
  14. * // styled-components usage
  15. * const div = styled.div`
  16. * ${ellipsis('250px')}
  17. * `
  18. *
  19. * // CSS as JS Output
  20. *
  21. * div: {
  22. * 'display': 'inline-block',
  23. * 'maxWidth': '250px',
  24. * 'overflow': 'hidden',
  25. * 'textOverflow': 'ellipsis',
  26. * 'whiteSpace': 'nowrap',
  27. * 'wordWrap': 'normal'
  28. * }
  29. */
  30. function ellipsis(width, lines) {
  31. if (lines === void 0) {
  32. lines = 1;
  33. }
  34. var styles = {
  35. display: 'inline-block',
  36. maxWidth: width || '100%',
  37. overflow: 'hidden',
  38. textOverflow: 'ellipsis',
  39. whiteSpace: 'nowrap',
  40. wordWrap: 'normal'
  41. };
  42. return lines > 1 ? _extends({}, styles, {
  43. WebkitBoxOrient: 'vertical',
  44. WebkitLineClamp: lines,
  45. display: '-webkit-box',
  46. whiteSpace: 'normal'
  47. }) : styles;
  48. }
  49. module.exports = exports.default;