From 327103b78d981a69dc0c28fb9e5d5e58d3b46630 Mon Sep 17 00:00:00 2001
From: Heeryong <drakang4@gmail.com>
Date: Thu, 8 Oct 2020 22:51:16 +0900
Subject: [PATCH] fix(ellipsis): fix invalid styles in multi-line

---
 src/mixins/ellipsis.js           |  5 +++--
 src/mixins/test/ellipsis.test.js | 12 ++++++------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/mixins/ellipsis.js b/src/mixins/ellipsis.js
index eeb12384..fbe622ed 100644
--- 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
index fdfb0486..9db878cc 100644
--- 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',
     })
   })