react-textfit在多模式下无法正确拟合文本

Question

我正在尝试将react-textfit模块与多行支持一起使用。但是，我的文本溢出了父div，而不是整齐地放在里面。

我的代码摘录：

return(
    <div style={{margin: '10px', border: 'solid black 2px', width: '200px', height: '80px'}}>
        <Textfit mode="multi">
            The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.
        </Textfit>
    </div>
)

我所看到的：

文本确实适合single模式，并在一行上正确显示。但是，当我将其切换为multi模式时，就好像我什至没有使用<Textfit>模块一样。

附加说明：虽然上面的文本是硬编码的，但实际的文本将从数据库中动态提取。

问题：

我在做什么错？如何解决这个问题，使文本适合div容器？

Answer 1

如果要使其适合父div，则需要告诉Textfit组件高度将是多少。

  return(
<div style={{margin: '10px', border: 'solid black 2px', width: '200px', height: '80px'}}>
    <Textfit mode="multi" style={{height: '80px'}}>
        The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.
    </Textfit>
</div>

）

Answer 2

您可以使用Textfit使<Textfit mode="multi" style={{height: '100%'}}>知道父div的高度，也可以使父div成为display: flex。

我不确定Textfit是如何工作的，但这几乎可以在所有情况下使用。

这里有一个小的Stackblitz来说明。

让我知道这是否不能完全满足您的要求！ ：）