textarea标签内容原格式输出以及首行缩进的解决办法

最新推荐文章于 2024-03-15 10:15:20 发布
原创 最新推荐文章于 2024-03-15 10:15:20 发布 · 2.8k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
html

当前文章被收录于：

html
7 篇文章 0 人学习
订阅专栏 查看详情
本文介绍了如何使用white-space:pre-wrap属性保持原格式输出时避免首行缩进，通过实例演示了正确处理空格和换行的方法，确保代码格式一致性。

读取时只需一个标签white-space:pre-wrap;就可以原格式输出了

<td style="white-space:pre-wrap;">{$reading_the_works}</td>

容易出现的坑，white-space:pre-wrap会出现首行缩进的解决办法，如下图

在这里插入图片描述
标记位置实际是没有空格和换行的，但是读取时候出现了首航缩进+换行，下面进行处理。

解决办法

删除代码中的换行和空格，如下图1错误示例：
在这里插入图片描述
正确的应该如下，中间连贯不应出现空格：
在这里插入图片描述
看效果：

在这里插入图片描述
完美解决。代码格式化固然好，但有时也有意想不到的坑。

标签
#html5
javascript实现textarea中tab键的缩排处理方法
10-24
主要介绍了javascript实现textarea中tab键的缩排处理方法,涉及javascript处理鼠标事件及页面元素的相关技巧,需要的朋友可以参考下
indent_helper:在 textarea 元素中使用 tab 键缩进
06-23
缩进助手 在 textarea 选择器上使用 tab 键缩进 单行/多行的缩进/取消缩进 IE 尚不支持 用法 以下示例的所有结果都是相同的。 IndentHelper.addEventListener var targetElement = document.getElementById('some_textarea'); IndentHelper.addEventListener(targetElement); // or IndentHelper.addEventListener(targetElement, 'keydown'); IndentHelper.eventListener var targetElement = document.getElementById('some_textarea'); targetElement.addEventListener('ke
利用textarea和white-space实现最简单的文章编辑器 支持缩进和换行
近10年前端开发工作经验，为你分享日常经验所得
03-15 1406
帮助读者用textarea快速实现一个基础文章编辑器。
textarea标签首行缩进问题 记录
dashuaigeyyds的博客
06-15 564
这是源码，页面中显示出来却是会 有空格。
textarea 内容分段，首行缩进
傲游码农 的专栏qq:928758777
02-09 5821
$seach = array("\r"); $replace = array(""); $str = "".str_replace($seach,$replace,$company_brief)."";
Html—让textarea标签中的内容原格式输出的两种办法
热门推荐
HanHenz的专栏
11-02 1万+
在没有使用编辑器而是使用了文本域&lt;textarea&gt;的情况下，用户所输入的内容呈现的效果并不理想，比如：原本的换行没有保留，全部成了单行显示。 要让在&lt;textarea&gt;中输入的内容原格式输出有一下两种办法： 方法一： 使用 &lt;pre&gt; 标签 使用&lt;pre&gt;标签是我最开始采用的办法，但是这种方法也有一定的缺陷,比如说我们在使用的编辑器的时候，换行、T...
Html—让textarea标签中的内容原格式输出
jiazimo的专栏
06-12 1349
使用css white-space 我们先来看一下white-space的定义和属性： white-space属性指定元素内的空白怎样处理。 其属性有： normal —— 默认，空白会被浏览器忽略 pre ——空白会被浏览器保留。其行为方式类似HTML中的<pre>标签。 nowrap —— 文本不会换行，文本会在同一行继续，直到遇到 标签为止。 pre-wrap —— 保留空白符序列，但正常进行换行。 pre-line —— 合并空白符序列，但保留换行符 inherit —— 规定应该
Html—让textarea标签中的内容原格式输出的办法
haogemr的博客
06-12 2029
使用css white-space属性 white-space属性值有: normal —— 默认，空白会被浏览器忽略 pre ——空白会被浏览器保留。其行为方式类似HTML中的<pre>标签。 nowrap —— 文本不会换行，文本会在同一行继续，直到遇到 标签为止。 pre-wrap —— 保留空白符序列，但正常进行换行。 pre-line —— 合并空白符序列，但保留换行符 in...
textarea 去掉首部缩进
LPLIFE的博客
06-24 4706
一开始, 在代码中 标签textarea我是这么写的,但是当我查看页面的时候,发现首行自动缩进了好几个空格,但是我想要的是,一进去,获取焦点后,就是在首位,没有缩进. 如下:&lt;textarea rows="3" cols="70" class="text-note" maxlength="150"&gt; &lt;/textarea&gt;如下图:最后发现一个奇葩的事情,把标签放在同一行,首
white-space: pre-wrap 会出现首行缩进的解决办法
rrrrroy_Ha的博客
12-28 6720
项目中遇到一个需求，用户输入内容需要保留空白符和换行符来展示。 想必大家都想到了 white-space: pre-wrap 用户输入的： 实际展示的： 会发现第一行为啥没空格，咋还首行缩进了，此时设置text-indent:0 也没用 网上一查，试试<pre>标签，保留原格式 还是不行，搜到了一个不太起眼的文章：如何让<pre></pre>里面的内容首行不缩进?-CSDN论坛 意思是标签和内容间不能有回车，尝试修改了下 心
TextArea文本样式原样输出
Hida_Baru的博客
11-23 1082
使用标签将内容包起来：${replyContent}
表单文本域<textarea>Tab键不能缩进文字的解决方案
风萧萧梦潇的博客
05-22 6142
textarea文本域可以实现多行输入。但在实际敲文本想缩进时，使用Tab键得不到想要的缩进效果。Tab键默认的功能是切换控件，但此时我们不需要。用户想要的功能不能实现，这样的用户体验是不能接受的，这也是我们不能容忍的。所以，我针对这一问题提出一个简单的解决方法。
textarea 自动换行缩进 分享
JoKer丶
06-03 9539
html页面部分，也在body中： 出差说明 javascript部分： //设置文本域自动换行 js var textt = document.getElementById("textt"); //用户看到的文本框 var sha
white-space:nowrap normal pre pre-wrap pre-line的区别以及pre和pre-wrap的“首行缩进“问题
箜的博客
12-12 3345
white-space相关属性以及pre和pre-wrap的"首行缩进"问题 1.white-space: nowrap; 多个空格会被合并为一个;换行符无用,且文字不会受到盒子宽度的影响. 2.white-space: pre; 多个空格不会合并;换行符有用,且文字不会受到盒子宽度的影响, 注意:换行后,当代码整合时造成的空格,也会被当做文本内输入的空格,影响显示.如下图 3.white-space: pre-wrap; 多个空格会被不会合并;换行符有用,且文字会受到盒子宽度的影响. 注意:换行后,当
关于如何实现textarea接受Tab键输入
Gdl.痕迹 的博客
02-21 2226
实现textarea接受Tab键的输入 首先我们需要知道，在一般情况下网页上按Tab键是切换控件焦点的。在textarea里也是这样，那么当我们需要在文本框里输入Tab的时候，应该怎么办呢？ 首先我们想到直接看一下 textarea 标签是否有控制Tab的属性 没得，好了，下一个。 我的解决方案： 我们可以通过textarea对象捕捉键盘事件，过滤Tab键，然后悄悄把他的处理方式从切换焦点改成插入...
使textarea支持tab缩进
qq_28332767的博客
08-05 6130
代码中 var indent = ' ';表示的四个空格，也可以使用 \t 来代替，\t 表示的是缩进 //textarea支持tab缩进 $("textarea").on( 'keydown', function(e) { if (e.keyCode == 9) { ...
Textarea自动缩进
10-24 1389
https://github.com/brighthas/textarea-indent qq群 244728015    www.jsfuns.com
Vue实现一键复制文本内容
qq_57443373的博客
05-26 2795
记录一下使用到的东西，将文字识别结果一键复制 代码 // 文本复制 copyText () { //使用textarea的原因是能进行换行，input不支持换行 var copyTextArea = document.createElement("textarea"); //自定义复制内容拼接 var str = `银行卡卡号 ${this.recognizeList.card_num}\n有效期 ${this.recognizeList.da
如何做一个高级的文本编辑器 textarea，拥有快捷键操作
学习笔记
03-06 1208
最近想做一个高级点的textarea一步一步来，你需要知道一些关于 input textarea 的基础知识。
【微信小程序】首行缩进、 去掉/取消首行缩进
梦和远方的博客
04-29 6514
首行缩进 text-indent:2em; text的意思是文本，indent在计算机英语中意思是缩进，至于后面的2em意思就是2个相对单位； em这个单位的意思就是文字的高度，1em就是1个文字的高度，2em就是两个文字高度，所以我们写的“text-indent:2em;”的意思就是，文本缩进2个文字的高度，因为汉字是方块字，高度和宽度是一样的，所以缩进2个文字的高度，就等于缩进两个文字的宽度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

zzoood

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

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

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

打赏作者

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

抵扣说明：

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

余额充值