一行css 在 html中展示\\n实现换行

已于 2022-03-22 22:18:07 修改
阅读量989 收藏 1
点赞数 1
分类专栏： Web 文章标签： css html css3
于 2022-02-28 16:31:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31754591/article/details/123185753
版权

讲真之前没写过，不然还真不知道这玩意，
写个笔记，往后还能翻一番嘛，哈哈
在这里插入图片描述
有个展示页面，需要将后端返回的\n展示为换行

网上看到有一种办法

用<pre> </pre> 标签包裹需要展示的数据

试了下也不是不可以，就是感觉他那个样式不是很好好看，还不好调整

还有另外一种办法就是使用css

white-space: pre-line;

一行就搞定
在这里插入图片描述

codernmx
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
在vue中利用v-html按分号将文本换行的例子
10-15
在这个例子中，我们将讨论如何在Vue中利用`v-html`指令和JavaScript来实现按分号进行文本换行。 首先，需求是将一段包含分号（包括英文分号";"和中文分号“；”）的文本，按照分号分割并换行显示。例如： ```text ...
超级连接的提示中换行效果实现代码
10-30
这是第一行\n这是第二行\n这是第三行">超级链接 ``` 在上述代码中，`\n`是一个转义字符，代表换行。当鼠标悬停在链接上时，浏览器会解析`title`属性中的`\n`，并在工具提示中展示为新的行。 不过，需要注意的是，...
css强制显示一行
qq_25741071的博客
08-31 3808
这样，文本内容就会被强制显示在一行中，并且超出一行的部分会被隐藏起来。将上述代码应用到需要强制显示一行的元素上，例如一个。要强制将文本内容显示在一行中，可以使用CSS的。，这样超出一行的内容就会被隐藏起来。，这样文本内容就不会换行。
html中显示\n为换行符
weixin_38300263的博客
10-14 4756
<p style="font-size:16px;white-space: pre-line;">{{item.job_content}}</p> p{ white-space: pre-line; }
vue 文本中的\n 、＜br＞换行显示
CC酱写前端的博客
05-08 3055
注意： style中white-sapce: pre-wrap;一、背景： 后端接口返回数据以\n 作为换行符，前端显示时候需要换行显示；二、br 换行（可以使用v-html）三、把br替换成\n换行。
css控制div里的的字符串的显示，遇到\n换行，超出div的宽度也换行
徐同保的专栏
03-28 782
css控制div里的的字符串的显示，遇到\n换行，超出div的宽度也换行
什么是CSS，有什么作用？\nCSS(Cascading Style Sheet)：层叠样式表语言。\nCSS的作用是：\n修饰HTM
y632481222的博客
03-30 183
doctype html>\n\u003Chtml>\n\t\u003Chead>\n\t\t\u003Ctitle>HTML中引入CSS样式的第二种方式：样式块\u003C/title>\n\n\t\t\u003Cstyle type=\"text/css\">\n\t\t\t/*\n\t\t\t\t这是CSS的注释\n\t\t\t*/\n\t\t\t/*\n\t\t\t\tid选择器\n\t\t\t\t语法格式：\n\t\t\t\t\t#id{\n\t\t\t\t\t\t样式名 : 样式值;
CSS_直接展示带有换行符号的字符串
小歪博客
02-03 505
【代码】CSS_直接展示带有换行符号的字符串。
vue + el-input 中 textarea 实现 placeholder 换行
06-14
, maxRows: 5 }" placeholder="第一行\n第二行\n第三行" /> // 使用 ::v-deep 或 >>> 选择器 ::v-deep .el-input__inner::-webkit-input-placeholder { white-space: pre-wrap; /* 允许换行 */ word-wrap:...
css3实现微信群头像布局代码.zip
07-11
关键在于使用`display: flex`和`flex-wrap: wrap`属性来创建一个弹性容器，允许子元素在一行内排列并自动换行。此外，我们可以利用`::before`和`::after`伪元素来填充空白区域，确保布局的美观。 ```css .avatar-...
让CSS flex布局最后一行列表左对齐的N种方法(小结)
12-28
引用张鑫旭的一篇文章分享给大家，如果你想进行修改进入链接点到对应的图片生成的链接进入，方可修改。 问题描述 //html <div class=list></div> <div class=list></div> <div class=list></div> ...
后端返回的文本的\n前端怎么换行？
qq_55491577的博客
03-19 729
简单粗暴的方法，使用css的属性white-space: pre-wrap;
CSS文本内容换行
xuehao1997的博客
03-14 1325
word-break: break-word; white-space: pre-wrap;
css white-space遇到“\n“换行
weixin_43915401的博客
11-18 4606
也能识别出换行符，但同时会保留空白符序列，如果只想换行，不建议使用。这样的文案，在页面里折行显示，就用换行符。设想是美好的，但是效果却是。一顿百度猛如虎，找到了解决方案。
HTML中识别[换行符/n]进行自动换行
weixin_43711639的博客
02-01 5740
通过white-space识别[换行符/n]进行自动换行
Vue2 后端返回 ‘/n’ 换行文本，v-hml不起效果
最新发布
CheneyChen27的博客
07-11 258
指令，以在 HTML 中渲染处理后的文本，这时。指令用于输出原始的 HTML，但它不会自动将。在页面上显示为换行，你需要在将数据传递给。因此，如果你从后端接收到的文本包含。来处理这个文本，将所有的。就被正确地显示为换行了。是从后端接收到的包含。
css 解决特殊字符换行
weixin_45936275的博客
09-09 1365
word-break: break-all;
前端处理后端返回的数据中有\n\n字样的换行符标识
张张张的博客
08-08 5553
上面圈着的部分就是\n，前端需要将数据进行换行，对于这类型的数据，在前端页面是需要进行稍微处理才能正常显示。如果没有经过处理，那么内容是不会在有换行符的位置进行换行显示的。pre-wrap:连续的空白符会被保留。在遇到换行符或者< br >元素，或者需要为了填充「行框盒子(line boxes)」时才会换行。pre-line连续的空白符会被合并。在遇到换行符或者< br >元素，或者需要为了填充「行框盒子(line boxes)」时会换行。使用v-html输出文本。以上两种方法都可以实现。
HTML 中的常用标签用法
weixin_62292640的博客
05-05 3003
<dt>标题</dt><dd>数据1</dd><dd>数据2</dd><dd>数据3</dd><dd>数据4</dd>
html表格怎么实现每n个换行
05-17
你可以使用 CSS 的 nth-child 选择器实现每 n 个表格行换行，具体方法如下： 1. 在表格的 CSS 样式中，为表格的每个奇数行（odd）添加背景色或者边框样式等。 ```css tr:nth-child(odd) { background-color: #f2f2f2; } ``` 2. 在表格的 CSS 样式中，为表格的每个 n（n 为正整数） 行添加 clear 样式，使得每 n 行之后自动换行。 ```css tr:nth-child(3n+1) { clear: both; } ``` 以上代码表示，表格的每 3 行之后添加一个 clear 样式，实现每 3 行自动换行。 完整的 CSS 代码如下： ```css tr:nth-child(odd) { background-color: #f2f2f2; } tr:nth-child(3n+1) { clear: both; } ``` 你可以根据需要修改上述代码中的 n 和样式设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

codernmx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值