解决"html不认识文本里的\n" (white-space)

最新推荐文章于 2024-03-27 17:32:30 发布
最新推荐文章于 2024-03-27 17:32:30 发布
阅读量823 收藏
点赞数 1
分类专栏： html 文章标签： white-space html识别\n
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daduryi/article/details/103589860
版权

使用white-space属性.

span标签文本里的\n默认不换行
// 合并空白符序列，但是保留换行符。

span {
  white-space: pre-line;
}

同理，针对不能识别多个空格的文本，也可以用以下代码

<div style="white-space:pre">AA   BB<div>
daduryi
关注
专栏目录
一张表格讲明白white-space属性。html如何识别\n\r，让这些特殊换行符换行。
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-31 1119
大多数标签在展示文本内容的时候都会默认把文本中的空白和换行符去掉，这的确大大的使得文本的排版更加美观了，也怎加了区域的利用率，可是就有一些需求是需要原原本本的展示出原汁原味的文本格式。那该如何展示出文本的内在格式呢？无外乎把不该去掉的空格展示出来，把不该合并的换行让它换行起来。normal默认。空白会被浏览器忽略。连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充时是必要。也就是说不管是文本中是否有空白符和换行符都会被省略。并且遇到父容器需要换行填充的时候也会自动换行。
HTML、CSS、HTML5、CSS3认识
weixin_43689726的博客
08-08 677
初步认识html和css的常见标签，常见问题
css white-space遇到“\n“换行
weixin_43915401的博客
11-18 5109
也能识别出换行符，但同时会保留空白符序列，如果只想换行，不建议使用。这样的文案，在页面里折行显示，就用换行符。设想是美好的，但是效果却是。一顿百度猛如虎，找到了解决方案。
CSS white-space属性详解
weixin_30657541的博客
02-04 247
概述 CSS的white-space属性用于指定如何处理容器中的空白字符，例如：空格()、换行(\n)、缩进(\t)等。 white-space出自CSS1，适用于块状元素，具有继承性，支持IE 5.5+、Chrome、FireFox、Safari、Opera等所有主流浏览器，其默认值为normal。 说明 white-space支持normal、pre、nowrap、pre-wrap、...
Html中识别换行符‘\n‘
热门推荐
Peng的博客
07-06 1万+
转载于：HTML文章页面，识别不了换行问题的解决 问题详情 后端返回的长串字符中是由换行符 ‘\n’的，但是前端展现该长串字符时却没有识别’\n’，挤在一行影响页面布局。 解决方案 查找相关资料后得到解决方案：CSS中由“white-space” 属性设置如何处理元素内的空白，设置元素的样式为white-space: pre-line即可解决问题。 注： 在React中这样设置该属性 <span style={{whiteSpace: 'pre-line'}} > // ..
span标签显示换行内容
贝铃-Turing的专栏
01-23 7562
处理span标签无法显示换行数据的方法 var re = new RegExp("\n", "g");// 匹配所有的\n，g表示全部global var str = $("#A").val(); $("#B").html(str.replace(re, "")).show();// html中解析换行用 java中的replace方法用的习惯了，发现jQuery中也有这个方法，然后就被坑了
如何让 HTML识别 String 里的 ‘\r\n‘ 并成功换行显示
a251628111的博客
11-13 9159
在结果所在的 div 的 css 设置： white-space: pre-line; 如： <span style="white-space: pre-line;"> 文本内容 </span> 然后页面就能成功识别 ‘\r\n’ 或 ‘\n’ ，并换行显示.
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4743
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
Java学习-14 CSS与CSS3美化页面及网页布局
deemo_hui的博客
09-11 1561
Java学习-14 CSS与CSS3美化页面 1. CSS简介 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素,从而实现美化HTML网页。 样式通常存储在样式表中，目的也是为了解决内容与表现分离的问题 外部样式表(CSS文件)可以极大提高工作效率 多个样式定义可层叠为一，后者可以覆盖前者样式 样式层叠次序 当同一个 HTML 元素定义了多个样式时，应该使用哪个样式？ 一般而言，所有的样式会根据下面的规则层叠于一个新的虚
HTML基础知识汇总
qq_43544490的博客
08-03 3431
------------------------------------ ????操作小技巧 ❗PS操作小技巧????????❕????????????✅ 1、视图–标尺：可测量像素尺寸感叹号 2、吸管工具可吸取颜色值 3、左侧移动工具–点击侧边标尺，按住不放拖至图片边缘-----方便测量 ❗vscode快捷码字 ul>li*4{$} 得到如下 <ul> <li>1</li> <li>2</li> <li>
HTML CSS基础
m0_46424423的博客
08-30 713
level 1 姬成 (一)简介 编辑器，快捷键，打字法 命令提示符终端学习 专业素养：超文本标记语言Hyper Text Markup Language (二)HTML标签 1.根标签： <html></html> 2.段落标签:只能有一个 <p>段落标签</p> 3.h标签 独成一段，逐次减少。更改字体大小，加粗字体 <h1></h1>——<h6></h6> 4.加粗字体 <strong>
vue中让字符串能识别换行符 \n
weixin_44492275的博客
09-26 1470
在标签的style中添加white-space:pre-line; <span style='white-space:pre-line;'>{{'aaaaaaa \n bbbbbbb \n ccccccc'}}</span>
span标签中换行符不起作用
weixin_36656321的博客
07-10 1032
修改标签设置whith-space:pre-line即可。
【我不熟悉的html】span标签使用innerText获取内容有多余的\n，绝对定位的元素影响innerText的值
qq_17335549的博客
11-08 571
【我不熟悉的html】span标签使用innerText获取内容有多余的\n的情况分析
span标签 宽度无效解决方案
kodmoqn的博客
07-08 210
span标签 宽度无效解决方案
span标签为什么不能换行
最新发布
HRSR1314的博客
03-27 688
span标签为什么不能换行
html不识别\n解决方法
苏公子的博客
01-19 2225
HTML
html不识别斜杆n 解决方法
qq_40372797的博客
01-27 5148
在 html 中的一些特殊场景中需要某一段文字遇到斜杠 n 就行换行，但是往往加了后没有效果。八那是因为html标签不识别 斜杠n,认为斜杠 n ,只是一个普通的文本。的 v-html 来解决，需要把 \n 换成 才能识别到;或使用js原生写法 innerHTML = '--------'文本不会换行，文本会在在同一行上继续，直到遇到标签为止。规定应该从父元素继承 white-space 属性的值。保留空白符序列，但是正常地进行换行。合并空白符序列，但是保留换行符。
CSS技巧：在IE6,IE7中实现white-space:pre-wrap
"这篇文章除了讲解HTML的空白符处理规则，重点还讨论了如何在IE6和IE7下实现`white-space:pre-wrap`的样式效果，以支持文本的保留空格和换行。文章指出，默认情况下，HTML会合并连续的空白符并忽略换行，但`<pre>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值