diff --git a/src/components/Ellipsis/index.js b/src/components/Ellipsis/index.js index ae4019ce7ee6971382cd71b7b9a87e24d3a384eb..9e99c416000eabe6b24364a194df149043a3a7ea 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') { @@ -20,16 +20,24 @@ const EllipsisText = ({ text, length, tooltip, ...other }) => { if (length - tail.length <= 0) { displayText = ''; } else { - displayText = text.slice(0, (length - tail.length)); + displayText = text.slice(0, length - tail.length); } if (tooltip) { - return {displayText}{tail}; + return ( + + + {displayText} + {tail} + + + ); } return ( - {displayText}{tail} + {displayText} + {tail} ); }; @@ -38,7 +46,7 @@ export default class Ellipsis extends Component { state = { text: '', targetCount: 0, - } + }; componentDidMount() { if (this.node) { @@ -81,7 +89,7 @@ export default class Ellipsis extends Component { targetCount: count, }); } - } + }; bisection = (th, m, b, e, text, shadowNode) => { const suffix = '...'; @@ -115,94 +123,88 @@ export default class Ellipsis extends Component { return this.bisection(th, mid, begin, end, text, shadowNode); } } - } + }; handleRoot = (n) => { this.root = n; - } + }; handleContent = (n) => { this.content = n; - } + }; handleNode = (n) => { this.node = n; - } + }; handleShadow = (n) => { this.shadow = n; - } + }; handleShadowChildren = (n) => { this.shadowChildren = n; - } + }; render() { const { text, targetCount } = this.state; - const { - children, - lines, - length, - className, - tooltip, - ...restProps - } = this.props; + const { children, lines, length, className, tooltip, ...restProps } = this.props; const cls = classNames(styles.ellipsis, className, { - [styles.lines]: (lines && !isSupportLineClamp), - [styles.lineClamp]: (lines && isSupportLineClamp), + [styles.lines]: lines && !isSupportLineClamp, + [styles.lineClamp]: lines && isSupportLineClamp, }); if (!lines && !length) { - return ({children}); + return ( + + {children} + + ); } // length if (!lines) { - return (); + return ( + + ); } const id = `antd-pro-ellipsis-${`${new Date().getTime()}${Math.floor(Math.random() * 100)}`}`; // support document.body.style.webkitLineClamp if (isSupportLineClamp) { - const style = `#${id}{-webkit-line-clamp:${lines};}`; + const style = `#${id}{-webkit-line-clamp:${lines};-webkit-box-orient: vertical;}`; return (
- { - tooltip ? ({children}) : children - } -
); + {tooltip ? {children} : children} + + ); } const childNode = ( - { - (targetCount > 0) && text.substring(0, targetCount) - } - { - (targetCount > 0) && (targetCount < text.length) && '...' - } + {targetCount > 0 && text.substring(0, targetCount)} + {targetCount > 0 && targetCount < text.length && '...'} ); return ( -
-
- { - 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 acd837899ecfd6dcd054a5852dfc495682604f78..dd59e3fac942fd299055f0591e87215742213f04 100644 --- a/src/components/Ellipsis/index.less +++ b/src/components/Ellipsis/index.less @@ -21,5 +21,4 @@ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; - -webkit-box-orient: vertical; }