Question

我有一个像这样的组件列表：

<OverlayTrigger placement="bottom" overlay={this.nameTooltip(product.full_name)}>
  <div refs={"product_full_name_" + product.full_name}>
    {product.full_name_tag(16)} /* Trim the full_name into 16 characters */
  </div>
</OverlayTrigger>

现在我想更改，如果product.full_name文本可以适合其容器，则正常呈现它。如果没有，修剪它直到适合并有工具提示。就个人而言，我可以从：

开始

componentDidMount() {
  this.resizeName()
}

componentDidUpdate() {
  this.resizeName()
}

/* Will be called after DOM is rendered */
resizeName() {
  for(ref in this.refs) {
    /* - Get ref begin with "product_full_name_" */
    /* - Check if text is overflow */
    /* - If overflow calculate number of character to fit with container */
  }
}

这是我的首发设计，如果有人有更好的解决方案，请帮助我。

Answer 1

你反对使用CSS来达到预期的效果吗？你可以用省略号和其他方式截断单词！它比这容易得多！

退房： developer.mozilla.org/en-US/docs/Web/CSS/text-over flow

如果文本太长而容器宽度修剪

1 个答案: