根据javascript和react中的视口宽度将文本分割成行

Question

我有一个特定的用例，我希望将文本字符串分成单行。例如，假设我有这个字符串：

const text='Lorem ipsum dolor sit amet consectetur adipisicing elit Eos blanditiis quia minima dignissimos nostrum accusantium iure quam recusandae modi reiciendis'

我想要的是这个：

<div className="line">Lorem ipsum dolor sit amet consectetur adipisicing</div>
<div className="line">elit Eos blanditiis quia minima dignissimos nostrum</div>
<div className="line">accusantium iure quam recusandae modi reiciendis</div>

现在问题就在这里，我只想要单行，并且不希望下一行出现换行文本。在普通视口上，它会按原样显示，但当我们进入较小的屏幕时，文本会换行。所以这就是我想要的：

1. 在每种屏幕尺寸上，文本都应该在一行中。
2. 单行字数取决于屏幕大小，如果字数无法容纳应推至下一行。
3. 行数没有要求。能组成多少行取决于单词的数量。
4. 我想在React中实现它。