Fixed: https://github.com/ant-design/ant-design-pro/issues/212

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ant-design-pro",
-  "version": "0.2.3-rc.1",
+  "version": "0.2.3-rc.2",
   "description": "An out-of-box UI solution for enterprise applications",
   "private": true,
   "scripts": {

src/components/Ellipsis/index.js

@@ -6,7 +6,7 @@ import styles from './index.less';
 /* eslint react/no-did-mount-set-state: 0 */
 /* eslint no-param-reassign: 0 */
 
-const isSupportLineClamp = (document.body.style.webkitLineClamp !== undefined);
+const isSupportLineClamp = !(document.body.style.webkitLineClamp !== undefined);
 
 const EllipsisText = ({ text, length, tooltip, ...other }) => {
   if (typeof text !== 'string') {
@@ -56,9 +56,20 @@ export default class Ellipsis extends Component {
     const { lines } = this.props;
     if (lines && !isSupportLineClamp) {
       const text = this.shadowChildren.innerText;
-      const targetHeight = this.root.offsetHeight;
+      const lineHeight = parseInt(getComputedStyle(this.root).lineHeight, 10);
+      const targetHeight = lines * lineHeight;
+      this.content.style.height = `${targetHeight}px`;
+      const totalHeight = this.shadowChildren.offsetHeight;
       const shadowNode = this.shadow.firstChild;
 
+      if (totalHeight <= targetHeight) {
+        this.setState({
+          text,
+          targetCount: text.length,
+        });
+        return;
+      }
+
       // bisection
       const len = text.length;
       const mid = Math.floor(len / 2);
@@ -80,10 +91,10 @@ export default class Ellipsis extends Component {
     shadowNode.innerHTML = text.substring(0, mid) + suffix;
     let sh = shadowNode.offsetHeight;
 
-    if (sh < th) {
+    if (sh <= th) {
       shadowNode.innerHTML = text.substring(0, mid + 1) + suffix;
       sh = shadowNode.offsetHeight;
-      if (sh >= th) {
+      if (sh > th) {
         return mid;
       } else {
         begin = mid;
@@ -97,7 +108,7 @@ export default class Ellipsis extends Component {
       shadowNode.innerHTML = text.substring(0, mid - 1) + suffix;
       sh = shadowNode.offsetHeight;
       if (sh <= th) {
-        return mid;
+        return mid - 1;
       } else {
         end = mid;
         mid = Math.floor((end - begin) / 2) + begin;
@@ -110,6 +121,10 @@ export default class Ellipsis extends Component {
     this.root = n;
   }
 
+  handleContent = (n) => {
+    this.content = n;
+  }
+
   handleNode = (n) => {
     this.node = n;
   }
@@ -178,13 +193,17 @@ export default class Ellipsis extends Component {
         ref={this.handleRoot}
         className={cls}
       >
-        {
-          tooltip ? (
-            <Tooltip title={text}>{childNode}</Tooltip>
-          ) : childNode
-        }
-        <div className={styles.shadow} ref={this.handleShadowChildren}>{children}</div>
-        <div className={styles.shadow} ref={this.handleShadow}><span>{text}</span></div>
+        <div
+          ref={this.handleContent}
+        >
+          {
+            tooltip ? (
+              <Tooltip title={text}>{childNode}</Tooltip>
+            ) : childNode
+          }
+          <div className={styles.shadow} ref={this.handleShadowChildren}>{children}</div>
+          <div className={styles.shadow} ref={this.handleShadow}><span>{text}</span></div>
+        </div>
       </div>
     );
   }

src/components/Ellipsis/index.less

@@ -2,6 +2,7 @@
   overflow: hidden;
   display: inline-block;
   word-break: break-all;
+  width: 100%;
 }
 
 .lines {