feat(ellipsis): ellipsis now optionally supports multline truncation

styled-components · Jun 12, 2020 · 6c35ac2 · 6c35ac2
1 parent 50c0325
commit 6c35ac2
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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()
+  })
 })