diff --git a/src/mixins/ellipsis.js b/src/mixins/ellipsis.js index a3b66a86..e5d5092e 100644 --- a/src/mixins/ellipsis.js +++ b/src/mixins/ellipsis.js @@ -2,7 +2,7 @@ import type { Styles } from '../types/style' /** - * CSS to represent truncated text with an ellipsis. + * 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 @@ -26,13 +26,25 @@ import type { Styles } from '../types/style' * 'wordWrap': 'normal' * } */ -export default function ellipsis(width?: string | number = '100%'): Styles { - return { +export default function ellipsis( + width?: ?string | ?number, + lines?: number = 1, +): Styles { + const styles = { display: 'inline-block', - maxWidth: width, + maxWidth: width || '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', wordWrap: 'normal', } + + return lines > 1 + ? { + ...styles, + display: '-webkit-box', + webkitLineClamp: lines, + webkitBoxOrient: 'vertical', + } + : styles } diff --git a/src/mixins/test/__snapshots__/ellipsis.test.js.snap b/src/mixins/test/__snapshots__/ellipsis.test.js.snap index 225a5bee..3ecb10f7 100644 --- a/src/mixins/test/__snapshots__/ellipsis.test.js.snap +++ b/src/mixins/test/__snapshots__/ellipsis.test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ellipsis should default max-width to 100% 1`] = ` +exports[`ellipsis should default lines to 1 and max-width to 100% 1`] = ` Object { "display": "inline-block", "maxWidth": "100%", @@ -32,3 +32,29 @@ Object { "wordWrap": "normal", } `; + +exports[`ellipsis should truncate text after 3 lines 1`] = ` +Object { + "display": "-webkit-box", + "maxWidth": "100%", + "overflow": "hidden", + "textOverflow": "ellipsis", + "webkitBoxOrient": "vertical", + "webkitLineClamp": 3, + "whiteSpace": "nowrap", + "wordWrap": "normal", +} +`; + +exports[`ellipsis should truncate text after 3 lines and 500px max-width 1`] = ` +Object { + "display": "-webkit-box", + "maxWidth": "500px", + "overflow": "hidden", + "textOverflow": "ellipsis", + "webkitBoxOrient": "vertical", + "webkitLineClamp": 3, + "whiteSpace": "nowrap", + "wordWrap": "normal", +} +`; diff --git a/src/mixins/test/ellipsis.test.js b/src/mixins/test/ellipsis.test.js index a515715e..9da02b17 100644 --- a/src/mixins/test/ellipsis.test.js +++ b/src/mixins/test/ellipsis.test.js @@ -10,7 +10,15 @@ describe('ellipsis', () => { expect(ellipsis(300)).toMatchSnapshot() }) - it('should default max-width to 100%', () => { + it('should default lines to 1 and max-width to 100%', () => { expect(ellipsis()).toMatchSnapshot() }) + + it('should truncate text after 3 lines', () => { + expect(ellipsis(null, 3)).toMatchSnapshot() + }) + + it('should truncate text after 3 lines and 500px max-width', () => { + expect(ellipsis('500px', 3)).toMatchSnapshot() + }) })