wrong with lines calculation when page load and window resize
chjiyun opened this issue · 6 comments
I set 'lines' to 3, but get 2 lines instead. Does this bug exist all the time?
<ReadMore
lines={3}
more="更多"
less="收起"
>
{text}
</ReadMore>
ReadMore is a Component package base on Truncate
@chjiyun can you provide more info for the case to test?
For example what props are passed to Truncate
or at least what is the text you want to truncate.
@moubi emmm, For example, i set lines of attribute to 3 or 4, but only get 2 lines of text all the time, as if this property is invalid, can you solve it?
static propTypes = {
children: PropTypes.node.isRequired,
more: PropTypes.string,
less: PropTypes.string,
text: PropTypes.node,
lines: PropTypes.number,
};
static defaultProps = {
lines: 3,
more: '更多',
less: '收起',
};
constructor(...args) {
super(...args);
this.state = {
expanded: false,
truncated: false,
};
this.handleTruncate = this.handleTruncate.bind(this);
this.toggleLines = this.toggleLines.bind(this);
}
handleTruncate(truncated) {
if (this.state.truncated !== truncated) {
this.setState({
truncated,
});
}
}
toggleLines(event) {
event.preventDefault();
this.setState({
expanded: !this.state.expanded,
});
}
<Fragment>
<Truncate
lines={!expanded && lines}
ellipsis={(
<span>... <a href='#' onClick={this.toggleLines}>{more}</a></span>
)}
onTruncate={this.handleTruncate}
>
{children}
</Truncate>
{!truncated && expanded && (
<span> <a href='#' onClick={this.toggleLines}>{less}</a></span>
)}
</Fragment>
I have created a sandbox with your example (https://codesandbox.io/s/6yj42pmlww) but can't reproduce what you are describing.
Please clarify if I misunderstood your problem.
Could you edit the sandbox and send the link that exactly reproduces your bug?
@pablosichert i apply it in Row and Col (a percent Component) Component, text spreads in three columns, and my version of react-truncate is 2.3.0
@pablosichert i try to copy chinese text to your example on codesandbox, but i exactly get wrong result of lines, you can have a try.