html 将文本换行到新行

goucqfw6 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(131)

我想将对象中的数据显示为一行一个字段，我使用了\n和Css中的white-space: pre-wrap设置，结果在控制台中得到了所需的结果，但在屏幕上传输不起作用，是否有类似的解决方案或者我做错了什么？
下面是我添加\n

let text = '';
  for (const [, value] of Object.entries(record)) {
    text += value + '\n';
  }
  console.log(text);

对于显示，我在antd中使用Description

...
        <Col className='m_right' span={13}>
          <Descriptions.Item className='pre'>{text}</Descriptions.Item>
        </Col>

结果：

在console.log中可以更新______
用<br/>代替\n的方法不再起作用了，它被认为是文本的一部分。可能需要另外将其转换为html片段，但我不确定。

Html

来源：https://stackoverflow.com/questions/74802382/wrapping-text-to-a-new-line

1条答案

按热度按时间

iqih9akk1#

由于时间不够，我决定用另一种方法实现它，安装了html-react-parser库，然后将代码转换为如下形式：

import parse from 'html-react-parser';

...

  let text = '';
  for (const [, value] of Object.entries(record)) {
    text += value + '<br>';
  }

...

<Descriptions.Item className='pre'>{parse(text)}</Descriptions.Item>

这在我的React应用中很有效：

我仍然认为，没有库和dangerouslySetInnerHTML也可以做到这一点，所以我很高兴提出解决方案的想法

赞(0）回复(0）举报 2022-12-16

我来回答

html 将文本换行到新行

1条答案

相关问题

热门标签

最新问答