CSS“overflow-wrap”在 React.js 中不起作用

Question

我希望能够处理用户提供的带有换行符的文本，同时处理可能比父元素宽度更宽的文本。我所说的比父元素更宽，是指比屏幕长的单个单词或行。

我'white-space': 'pre-wrap'也添加了'overflow-wrap': 'break-word'。处理white-space换行符，但overflow-wrap不会破坏长单词/行。我也尝试过'word-wrap': 'break-word'但没有运气。

这一切都在 React.js 中。在 React.js 之外，我会将其包装在<pre>.

前任：

<div class="request-top" style={{'white-space': 'pre-wrap', 'overflow-wrap': 'break-word'}}>
   <p>{text}</p>
</div>

我还尝试将文本变量转换为字符串文字：

<p>{`${text}`}</p>

Answer 1

在React中，内联样式应该是camelCased。

React 文档样式部分还提到：

style 属性接受具有驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串。

尝试修改如下：

<div class="request-top" style={{whiteSpace: 'pre-wrap', overflowWrap: 'break-word'}}>
   <p>{text}</p>
</div>