Update Ellipsis compute with height & Fixed #167

Author: nikogu

src/components/Ellipsis/index.js

@@ -46,7 +46,7 @@ export default class Ellipsis extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componenthillReceiveProps(nextProps) {
     if (this.props.lines !== nextProps.lines) {
       this.computeLine();
     }
@@ -55,17 +55,15 @@ export default class Ellipsis extends Component {
   computeLine = () => {
     const { lines } = this.props;
     if (lines && !isSupportLineClamp) {
-      const fontSize = parseInt(window.getComputedStyle(this.node).fontSize, 10) || 14;
       const text = this.shadowChildren.innerText;
-      const targetWidth = (this.node.offsetWidth || this.node.parentNode.offsetWidth) * lines;
+      const targetHeight = this.root.offsetHeight;
       const shadowNode = this.shadow.firstChild;
 
       // bisection
-      const tw = (targetWidth - (lines * (fontSize / 2)) - fontSize);
       const len = text.length;
       const mid = Math.floor(len / 2);
 
-      const count = this.bisection(tw, mid, 0, len, text, shadowNode);
+      const count = this.bisection(targetHeight, mid, 0, len, text, shadowNode);
 
       this.setState({
         text,
@@ -74,40 +72,45 @@ export default class Ellipsis extends Component {
     }
   }
 
-  bisection = (tw, m, b, e, text, shadowNode) => {
+  bisection = (th, m, b, e, text, shadowNode) => {
+    const suffix = '...';
     let mid = m;
     let end = e;
     let begin = b;
-    shadowNode.innerHTML = text.substring(0, mid);
-    let sw = shadowNode.offsetWidth;
+    shadowNode.innerHTML = text.substring(0, mid) + suffix;
+    let sh = shadowNode.offsetHeight;
 
-    if (sw < tw) {
-      shadowNode.innerHTML = text.substring(0, mid + 1);
-      sw = shadowNode.offsetWidth;
-      if (sw >= tw) {
+    if (sh < th) {
+      shadowNode.innerHTML = text.substring(0, mid + 1) + suffix;
+      sh = shadowNode.offsetHeight;
+      if (sh >= th) {
         return mid;
       } else {
         begin = mid;
         mid = Math.floor((end - begin) / 2) + begin;
-        return this.bisection(tw, mid, begin, end, text, shadowNode);
+        return this.bisection(th, mid, begin, end, text, shadowNode);
       }
     } else {
       if (mid - 1 < 0) {
         return mid;
       }
-      shadowNode.innerHTML = text.substring(0, mid - 1);
-      sw = shadowNode.offsetWidth;
-      if (sw <= tw) {
+      shadowNode.innerHTML = text.substring(0, mid - 1) + suffix;
+      sh = shadowNode.offsetHeight;
+      if (sh <= th) {
         return mid;
       } else {
         end = mid;
         mid = Math.floor((end - begin) / 2) + begin;
-        return this.bisection(tw, mid, begin, end, text, shadowNode);
+        return this.bisection(th, mid, begin, end, text, shadowNode);
       }
     }
   }
 
-  handleRef = (n) => {
+  handleRoot = (n) => {
+    this.root = n;
+  }
+
+  handleNode = (n) => {
     this.node = n;
   }
 
@@ -130,7 +133,6 @@ export default class Ellipsis extends Component {
       ...restProps
     } = this.props;
 
-
     const cls = classNames(styles.ellipsis, className, {
       [styles.lines]: (lines && !isSupportLineClamp),
       [styles.lineClamp]: (lines && isSupportLineClamp),
@@ -160,7 +162,7 @@ export default class Ellipsis extends Component {
     }
 
     const childNode = (
-      <span>
+      <span ref={this.handleNode}>
         {
           (targetCount > 0) && text.substring(0, targetCount)
         }
@@ -173,7 +175,7 @@ export default class Ellipsis extends Component {
     return (
       <div
         {...restProps}
-        ref={this.handleRef}
+        ref={this.handleRoot}
         className={cls}
       >
         {

src/components/Ellipsis/index.less

@@ -1,18 +1,16 @@
 .ellipsis {
+  overflow: hidden;
   display: inline-block;
   word-break: break-all;
 }
 
 .lines {
   position: relative;
   .shadow {
+    display: block;
+    position: relative;
     color: transparent;
     opacity: 0;
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 9999px;
     z-index: -999;
   }
 }