fix(ellipsis): fix invalid styles in multi-line

styled-components · Oct 8, 2020 · 0da1850 · 0da1850
1 parent fa58fb2
commit 0da1850
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/mixins/ellipsis.js b/src/mixins/ellipsis.js
@@ -39,9 +39,10 @@ export default function ellipsis(width?: ?string | ?number, lines?: number = 1):
   return lines > 1
     ? {
       ...styles,
+      WebkitBoxOrient: 'vertical',
+      WebkitLineClamp: lines,
       display: '-webkit-box',
-      webkitLineClamp: lines,
-      webkitBoxOrient: 'vertical',
+      whiteSpace: 'normal',
     }
     : styles
 }
diff --git a/src/mixins/test/ellipsis.test.js b/src/mixins/test/ellipsis.test.js
@@ -37,26 +37,26 @@ describe('ellipsis', () => {
 
   it('should truncate text after 3 lines', () => {
     expect(ellipsis(null, 3)).toEqual({
+      WebkitBoxOrient: 'vertical',
+      WebkitLineClamp: 3,
       display: '-webkit-box',
       maxWidth: '100%',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      webkitBoxOrient: 'vertical',
-      webkitLineClamp: 3,
-      whiteSpace: 'nowrap',
+      whiteSpace: 'normal',
       wordWrap: 'normal',
     })
   })
 
   it('should truncate text after 3 lines and 500px max-width', () => {
     expect(ellipsis('500px', 3)).toEqual({
+      WebkitBoxOrient: 'vertical',
+      WebkitLineClamp: 3,
       display: '-webkit-box',
       maxWidth: '500px',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      webkitBoxOrient: 'vertical',
-      webkitLineClamp: 3,
-      whiteSpace: 'nowrap',
+      whiteSpace: 'normal',
       wordWrap: 'normal',
     })
   })