react项目文本内\n＜br/＞不换行问题

最新推荐文章于 2024-05-21 14:20:57 发布

搬砖的前端

最新推荐文章于 2024-05-21 14:20:57 发布

阅读量1k

点赞数 12

分类专栏： css样式及兼容性文章标签： react.js 前端前端框架

互帮互助，点赞收藏。一起成长，欢迎互动。

本文链接：https://blog.csdn.net/weixin_44461275/article/details/135275558

版权

css样式及兼容性专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了在React项目中处理文本不换行问题的三种策略：使用CSS的white-space和word-break属性，JavaScript的replace方法替换newline，以及dangerouslySetInnerHTML的使用。CSS方法通常被认为是最直接有效的解决方案。

摘要由CSDN通过智能技术生成

react项目文本内\n
不换行问题

第一种：优先css设置：

div {
	white-space: pre-wrap;
	word-break: break-all;
}

或：

<div style={{wordBreak: 'break-all', whiteSpace: 'pre-wrap'}} >{cot}</div>

第二种：js字符串替换

replace(/\\n/g, '<br />')

第三种：未必有用，我是第一步css即可解决了

<div dangerouslySetInnerHTML={{ __html: cot }}/>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

搬砖的前端

关注关注

12
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

后台返回数据中有换行符，但是在文本中不显示换行效果怎么渲染后台返回的一堆文字

xm1037782843的博客

12-30

2287

换行由来 Unix系统里，每行结尾只有“<换行>”，即"\n"；Windows系统里面，每行结尾是“<换行><回车 >”，即“\n\r”；Mac系统里，每行结尾是“<回车>”，即"\n"；。一个直接后果是，Unix/Mac系统下的文件在 Windows里打开的话，所有文字会变成一行；而Windows里的文件在Unix/Mac下打开的话，在每行的结尾...

解决Markdown在线编辑器不能换行的问题

qq_40329679的博客

11-23

3255

Markdown在线编辑器不能换行的问题最近无论是写CSDN博客，还是写Gayhub的readme，亦或是实训时在matrix上面回答简答题，都会发现一个很烦的事，就是这种在线版的内置markdown编辑器显示出来的内容无法换行。下面是解决办法，在你想要换行的地方添加以下语句： <p><span><span style="font-family:Verdana,...

参与评论您还未登录，请先登录后发表或查看评论

react项目解决/n字符串不换行问题

最新发布

weixin_69903461的博客

05-21

616

【代码】react项目解决/n字符串不换行问题。

React项目/JSX中‘\n’不换行问题解决

wm931020的博客

07-26

5125

最近在React项目中，后端返回的字符串中用\n提供给前端进行换行，但是在前端页面并没用实现换行，我在网上查了很多资料，找到很多方法，但是都没有实现换行，最后，我自己无意间通过组合试出来了。 1 首先，对返回的数据中的\n进行处理,用<br/>替换 eg:const info = 'React\n Vue\n Angular'; const replaceInfo = info.replace(/\\n/g, '<br/>); 2 在JSX中，配合dangerousSetIn

react pre标签内代码不换行问题

weixin_30846599的博客

10-15

669

react 使用hightlight.js 显示<pre><code>标签内的代码时不换行，显示如下： JSX会换行，代码更改为： <pre> <code> {` ; boilerplate [package] name = "some_name" authors = ["Author"] description...

css float 之后br标签不换行问题

千里之行始于足下

10-04

870

<div>aaa</div> <br/><div>bbb</div> <br/><div>ccc</div> 这样写br是可以正常换行的而像下面的写法，br似乎不能换行 <div style="float:left;">aaa

antd Tooltip 中\n换行无效的问题

gd81325的博客

09-11

2996

先把获取到的数据转成数组直接使用<br/>标签渲染，字符串是无效的。

关于textarea提交的内容无法换行的解决办法

12-10

content = content.replace(/<br \/>/g, '\n'); ``` JavaScript 的 `replace()` 函数是字符串操作中非常重要的工具，它允许我们根据指定的模式（可以是字符串或正则表达式）来替换文本。在这个例子中，我们使用了...

React实战 | JSX的空格与换行不显示问题的解决方案

qq_35536883的博客

08-07

1万+

空格显示不正常这是因为浏览器显示机制，会将连续多个空格显示成1个空格。在这些示例中，HTML和JSX中的空格是一样的 <div>Hello•World</div> <div>•Hello•World</div> <div>••Hello•World</div> <div>•••Hello•World•••&lt...

React学习六（Ant Design of React）

qq_44872688的博客

03-17

2189

文章目录一、特性二、使用过程1、安装2、antd引用三、antd的组件库1、Button按钮 antd 是基于Ant Design设计体系的 React UI 组件库，主要用于研发企业级中后台产品，来自于“蚂蚁金服”。一、特性 ①提炼自企业级中后台产品的交互语言和视觉风格。 ②开箱即用的高质量 React 组件。 ③使用 TypeScript 开发，提供完整的类型定义文件。 ④全链路开发和设计工具体系。 ⑤数十个国际化语言支持。 ⑥

请求数据返回带<br/>但在页面显示时并不换行，解决！

weixin_30652879的博客

04-19

2650

例一：例二：当前台请求返回类似data = "aaaa<br/>bbbb<br/>cccc";这种数据直接塞进div元素里并不会产生换行效果需要需要在div里添加一个样式 white-space: pre-wrap 才能产生换行效果但 <br/>标签并不会被浏览器识别,此时需要正则表达 data.replace(/<...

解决前端“\n”不换行问题

weixin_46953330的博客

03-13

1万+

解决前端"\n"不换行问题

vue中换行符不换行、不生效的处理(\n或者＜br＞)

热门推荐

编程界明世隐的博客

03-10

4万+

先看一段代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <span>{{msg}}</span> </d

Bootstrap-table表头使用标签不解析，表头使用＜br＞标签没有进行换行问题解决

墨尘

08-06

832

之前在表头使用标签，如<br>是可以换行的，今天使用发现不行了。然后我就去看一下表格的属性一个一个的找，然后就有了：默认为 false ，也不知道啥时候加了一个data-escape="true" 。把data-escape="true" 去掉或者改为data-escape="false"，默认为 false ，还是直接去掉吧。然后就可以了。 ...

【react里面怎么实现换行】

weixin_54219288的博客

07-04

4414

react换行

【原】dangerouslySetInnerHTML, 让React正常显示你的html代码

weixin_33904756的博客

12-11

961

昨天在弄一个让内容换行显示时，遇到一个问题，就是我有<br />的代码在页面中不换行，而是直接显示<br />,代码如下： <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Cont...

换行符 \n 不起作用

John的专栏

11-27

821

接口返回字段包含换行符\n，但前端没有正常显示，百度大法后，添加white-space: pre-line，搞定！

react 中内容换行显示

RN_David的博客

10-19

3527

项目react+antdPro，在proTable中内容换行显示。

【React】replace(“\n“,“ ＜br＞“)失效

all_might1的博客

02-04

1901

最近又有日志展示优化的需求进行转换的时候replace("\n"," <br>")失效了于是找了下解决方法解决方法在\n之前再加一个\，让其进行解析，有效发现要是有些字段认不出来，就在之前疯狂加\，就可以了 ...

react中使用TS将一个string类型的字符串（'域名资产：第2行，负责人default不存在\n主机资产：第2行，负责人default不存在\n主机资产：第2行）根据字符串中的换行符进行换行展示

05-31

您可以使用React中的`<pre>`标签来展示多行文本，并使用字符串的`split()`方法在换行符上拆分字符串。以下是一个例子： ```tsx import React from 'react'; interface Props { text: string; } const MultiLineText: React.FC<Props> = ({ text }) => { return ( <pre> {text.split('\n').map((line, index) => ( <React.Fragment key={index}> {line} <br /> </React.Fragment> ))} </pre> ); }; export default MultiLineText; ``` 在上面的代码中，我们创建了一个名为`MultiLineText`的组件，它接受一个名为`text`的字符串类型属性。在组件中，我们使用`split()`方法将字符串拆分为行，并使用`map()`方法在每行后添加`<br>`标签。最后，我们将结果包装在`<pre>`标签中，以便在显示时保留换行符。

react项目文本内\n＜br/＞不换行问题

react项目文本内\n不换行问题

react项目文本内\n
不换行问题