Html—让textarea标签中的内容原格式输出的两种办法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Html—让textarea标签中的内容原格式输出的两种办法相关的知识,希望对你有一定的参考价值。

参考技术A 在没有使用编辑器而是使用了文本域 <textarea> 的情况下,用户所输入的内容呈现的效果并不理想,比如:原本的换行没有保留,全部成了单行显示。

要让在 <textarea> 中输入的内容原格式输出有一下两种办法:

使用 <pre> 标签是我最开始采用的办法,但是这种方法也有一定的缺陷,比如说我们在使用的编辑器的时候,换行、Tab、空格都会影响到输出结果。如图:

并且, <pre> 标签本身自带得有一些样式,比如字体等。如果你的页面有引入bootstrap等css框架,那么受样式影响就更多了,你得再写去覆盖。

因此,这种方法并不推荐。

我们先来看一下 white-space 的定义和属性:

其属性有:

也就是说,我们可以使用 white-space:pre-warp 或 white-space:pre-line 达到我们想要的效果。

两者的区别是:

如图:

white-space:pre-warp 效果如下:

white-space:pre-line 效果如下:

因此,更推荐使用第二种方法。

python如果想输出原格式的内容,可以加''' ''',占位符使用方式

print(我考了%d分%20)
msg=‘‘‘
---------info of %s-----------
name: %s
age: %d                           #字符串不能放到%d处
job: %s
salary: %f
you will be retired in %s years   #数字可以放到%s处
---------end---------------
‘‘‘%(tom,tom,20,it,3444.44,45)
print(msg)

 

以上是关于Html—让textarea标签中的内容原格式输出的两种办法的主要内容,如果未能解决你的问题,请参考以下文章

vue textarea空格和换行处理

textarea标签输出内容时不能顶格(左对齐)输出

如何让textarea中输入多行的数据在p标签中换行?

Python项目1:自动添加标签

HTML:如何在 textarea 中保留格式?

在html页面中,比如有个textarea,如果让鼠标禁止选中其中的内容,是用javascript来做吗?