CSS 'overflow-wrap' 在 React.js 中不起作用答案

【问题标题】：CSS 'overflow-wrap' does not work in React.jsCSS 'overflow-wrap' 在 React.js 中不起作用
【发布时间】：2020-07-03 23:44:17
【问题描述】：

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

我添加了'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>

【问题讨论】：

标签： html css reactjs overflow word-wrap

【解决方案1】：

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

React 文档style 部分还提到：

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

尝试如下修改：

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

【讨论】：