1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
- "use strict";
- exports.__esModule = true;
- exports["default"] = ellipsis;
- 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); }
- /**
- * CSS to represent truncated text with an ellipsis. You can optionally pass a max-width and number of lines before truncating.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- * ...ellipsis('250px')
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- * ${ellipsis('250px')}
- * `
- *
- * // CSS as JS Output
- *
- * div: {
- * 'display': 'inline-block',
- * 'maxWidth': '250px',
- * 'overflow': 'hidden',
- * 'textOverflow': 'ellipsis',
- * 'whiteSpace': 'nowrap',
- * 'wordWrap': 'normal'
- * }
- */
- function ellipsis(width, lines) {
- if (lines === void 0) {
- lines = 1;
- }
- var styles = {
- display: 'inline-block',
- maxWidth: width || '100%',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- whiteSpace: 'nowrap',
- wordWrap: 'normal'
- };
- return lines > 1 ? _extends({}, styles, {
- WebkitBoxOrient: 'vertical',
- WebkitLineClamp: lines,
- display: '-webkit-box',
- whiteSpace: 'normal'
- }) : styles;
- }
- module.exports = exports.default;
|