如何在 React 中换行不带空格的文本？答案

【问题标题】：How to wrap text without spaces in React?如何在 React 中换行不带空格的文本？
【发布时间】：2020-03-05 17:22:07
【问题描述】：

我的尝试：https://codesandbox.io/s/fast-smoke-bhudq。它不换行，而是向右溢出，越过“HELLO”。好像maxWidth也没有效果。

那么任何人都可以更新示例，使文本限制在某个最大宽度内，并分成多行吗？

【问题讨论】：

您的 CSS 设置不正确。您正在使用 CSS 道具，就好像它们是元素道具一样。它们不是，它们属于 style 道具。您的问题相当于忘记分号并在 SO 上询问它，这可能是您收到否决票的原因。
谢谢。我认为你可以做到这一点，因为我见过例如fullWidth 作为道具。

【解决方案1】：

代替

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

你会想要类似的东西

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

【讨论】：