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

Question

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

我添加了 'white-space': 'pre-wrap' 以及 'overflow-wrap': 'break-word'。 white-space 处理换行，但 overflow-wrap 不会换行 words/lines。我也试过 '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 中，内联样式应该是驼峰式。

React 文档 style 部分还提到：

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.

尝试修改如下：

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

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

CSS 'overflow-wrap' does not work in React.js

html

css

overflow

word-wrap

reactjs