时间戳

首页 > 解决方案 > CSS 'overflow-wrap' 在 React.js 中不起作用

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

问题描述

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

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

标签： htmlcssreactjsoverflowword-wrap

解决方案

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

React 文档样式部分还提到：

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

尝试修改如下：

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

推荐阅读