Commit 43add560 authored by nikogu's avatar nikogu
parent 5a61434c
{ {
"name": "ant-design-pro", "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", "description": "An out-of-box UI solution for enterprise applications",
"private": true, "private": true,
"scripts": { "scripts": {
......
...@@ -6,7 +6,7 @@ import styles from './index.less'; ...@@ -6,7 +6,7 @@ import styles from './index.less';
/* eslint react/no-did-mount-set-state: 0 */ /* eslint react/no-did-mount-set-state: 0 */
/* eslint no-param-reassign: 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 }) => { const EllipsisText = ({ text, length, tooltip, ...other }) => {
if (typeof text !== 'string') { if (typeof text !== 'string') {
...@@ -56,9 +56,20 @@ export default class Ellipsis extends Component { ...@@ -56,9 +56,20 @@ export default class Ellipsis extends Component {
const { lines } = this.props; const { lines } = this.props;
if (lines && !isSupportLineClamp) { if (lines && !isSupportLineClamp) {
const text = this.shadowChildren.innerText; 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; const shadowNode = this.shadow.firstChild;
if (totalHeight <= targetHeight) {
this.setState({
text,
targetCount: text.length,
});
return;
}
// bisection // bisection
const len = text.length; const len = text.length;
const mid = Math.floor(len / 2); const mid = Math.floor(len / 2);
...@@ -80,10 +91,10 @@ export default class Ellipsis extends Component { ...@@ -80,10 +91,10 @@ export default class Ellipsis extends Component {
shadowNode.innerHTML = text.substring(0, mid) + suffix; shadowNode.innerHTML = text.substring(0, mid) + suffix;
let sh = shadowNode.offsetHeight; let sh = shadowNode.offsetHeight;
if (sh < th) { if (sh <= th) {
shadowNode.innerHTML = text.substring(0, mid + 1) + suffix; shadowNode.innerHTML = text.substring(0, mid + 1) + suffix;
sh = shadowNode.offsetHeight; sh = shadowNode.offsetHeight;
if (sh >= th) { if (sh > th) {
return mid; return mid;
} else { } else {
begin = mid; begin = mid;
...@@ -97,7 +108,7 @@ export default class Ellipsis extends Component { ...@@ -97,7 +108,7 @@ export default class Ellipsis extends Component {
shadowNode.innerHTML = text.substring(0, mid - 1) + suffix; shadowNode.innerHTML = text.substring(0, mid - 1) + suffix;
sh = shadowNode.offsetHeight; sh = shadowNode.offsetHeight;
if (sh <= th) { if (sh <= th) {
return mid; return mid - 1;
} else { } else {
end = mid; end = mid;
mid = Math.floor((end - begin) / 2) + begin; mid = Math.floor((end - begin) / 2) + begin;
...@@ -110,6 +121,10 @@ export default class Ellipsis extends Component { ...@@ -110,6 +121,10 @@ export default class Ellipsis extends Component {
this.root = n; this.root = n;
} }
handleContent = (n) => {
this.content = n;
}
handleNode = (n) => { handleNode = (n) => {
this.node = n; this.node = n;
} }
...@@ -177,6 +192,9 @@ export default class Ellipsis extends Component { ...@@ -177,6 +192,9 @@ export default class Ellipsis extends Component {
{...restProps} {...restProps}
ref={this.handleRoot} ref={this.handleRoot}
className={cls} className={cls}
>
<div
ref={this.handleContent}
> >
{ {
tooltip ? ( tooltip ? (
...@@ -186,6 +204,7 @@ export default class Ellipsis extends Component { ...@@ -186,6 +204,7 @@ export default class Ellipsis extends Component {
<div className={styles.shadow} ref={this.handleShadowChildren}>{children}</div> <div className={styles.shadow} ref={this.handleShadowChildren}>{children}</div>
<div className={styles.shadow} ref={this.handleShadow}><span>{text}</span></div> <div className={styles.shadow} ref={this.handleShadow}><span>{text}</span></div>
</div> </div>
</div>
); );
} }
} }
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
overflow: hidden; overflow: hidden;
display: inline-block; display: inline-block;
word-break: break-all; word-break: break-all;
width: 100%;
} }
.lines { .lines {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment