diff --git a/package.json b/package.json index 6a0b6a11014706ad1c89ae38b0f50fa2a649a79a..fc6f3c9e63be3efce2e521f6090f73eb803c9a68 100755 --- a/package.json +++ b/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": { diff --git a/src/components/Ellipsis/index.js b/src/components/Ellipsis/index.js index 0e9f6548123097faea49f9feda153d1f9192d4d5..f81bd6c3656c86d47ed5018b509f5a0c747502cb 100644 --- a/src/components/Ellipsis/index.js +++ b/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 ? ( - {childNode} - ) : childNode - } -
{children}
-
{text}
+
+ { + tooltip ? ( + {childNode} + ) : childNode + } +
{children}
+
{text}
+
); } diff --git a/src/components/Ellipsis/index.less b/src/components/Ellipsis/index.less index 491ec57c22d0e273fdc7f5a32b761036956f5fab..acd837899ecfd6dcd054a5852dfc495682604f78 100644 --- a/src/components/Ellipsis/index.less +++ b/src/components/Ellipsis/index.less @@ -2,6 +2,7 @@ overflow: hidden; display: inline-block; word-break: break-all; + width: 100%; } .lines {