wrong with lines calculation when page load and window resize

[chjiyun]

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

[moubi]

@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.

[chjiyun]

@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>

[pablosichert]

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?

[chjiyun]

@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

[chjiyun]

@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.

[Ktchan825]

@chjiyun From my experience, Chinese is not supported well. this library uses " " as separator and split the line which is fine for English but not working for Chinese or other languages that don't separator word by space.

https://github.com/One-com/react-truncate/issues/107