如何在React中包装没有空格的文本？

Question

我的尝试：https://codesandbox.io/s/fast-smoke-bhudq。 它不环绕，而是溢出到右侧的“ HELLO”上方。 似乎maxWidth也无效。

那么任何人都可以更新示例，以便将文本限制为一定的最大宽度并分成多行吗？

Answer 1

代替

<Box
  component="div"
  flexWrap="wrap"
  wordWrap="break-word"
  ...
>

您想要类似的东西

<Box
  style={{
    flexWrap: 'wrap',
    wordWrap: 'break-word',
    ...
  }}
>