diff --git a/src/components/Ellipsis/index.js b/src/components/Ellipsis/index.js index e48fb88982..0e9f654812 100644 --- a/src/components/Ellipsis/index.js +++ b/src/components/Ellipsis/index.js @@ -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 = ( - + { (targetCount > 0) && text.substring(0, targetCount) } @@ -173,7 +175,7 @@ export default class Ellipsis extends Component { return (
{ diff --git a/src/components/Ellipsis/index.less b/src/components/Ellipsis/index.less index 2811bd37b0..491ec57c22 100644 --- a/src/components/Ellipsis/index.less +++ b/src/components/Ellipsis/index.less @@ -1,4 +1,5 @@ .ellipsis { + overflow: hidden; display: inline-block; word-break: break-all; } @@ -6,13 +7,10 @@ .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; } }