<pre>标签控制textarea输入的文字显示格式

最新推荐文章于 2022-03-25 19:21:13 发布

最新推荐文章于 2022-03-25 19:21:13 发布 · 499 阅读

文章标签：

#Opera #CSS

J2EE之Web前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用CSS样式来优化文本展示的方法，确保文本能够正确换行并保留空格，适用于多种浏览器环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style type="text/css">
pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
</style>

<pre style="width: 580;margin-top: 0px;">内容，能换行，空格也能显示。</pre>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

gdjbj2007

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

HTML常用标签-----例如＜p＞＜img＞＜li＞等

qq_56798763的博客

07-04

1143

1.HTML5头部结构【DOCTYPE html】声明文档类型为HTML5文件。文档声明在HTML5文档必不可少，且必须放在文档的第一行。【meta标签】 1.charset属性：单独使用，设置文档字符及编码格式。写法：<meta charset="UTF-8"> 常见的中文编码格式： B-2312:国标码，简体中文 GBK：扩展的国标编码，简体中文 UTF-8:万国码 Unicode码，基本兼容各国语言文字 2.http-equiv属性：需配合c..

【前端】html

haoshaokang_的博客

09-23

441

html是一个前端语言，是一个标签化的语言，即html代码由标签构成，它没有逻辑。html代码也不需要编译，运行的话在浏览器中就可以直接运行。下面具体来看一下html代码这是一段html代码，由几个标签组成，称为开始标签，称为结束标签。大部分标签是成对出现的，但是也有标签是单个出现的，只有开始标签，称为单标签。两个标签中是内容，内容可以是文本，也可以是其他标签。在开始标签中可以存放一些属性，这些属性以键值对来表示。整个html文件根据标签可以看成一个树形结构✅这棵树称为一个DOM树（document o

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

保留textarea标签的文本格式

weixin_51721377的博客

10-23

375

<pre>{{item.crContent }}</pre> .whBottom pre { font-size: 0.48rem; font-weight: 400; color: #333333; font-family: Arial, Helvetica; white-space: pre-line; }

textarea文本域提交带有<pre>标签问题

xxhxuexi的专栏

03-13

968

当用jsp在页面当中out.println("内容")；时候很明显多了一个换行符号。如果提交到后台这样会在你输入的文本中加上<pre></pre>标签 <textarea>

html5 textarea自动换行,如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度...

weixin_40009393的博客

05-30

373

HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加和等HTML元素来添加换行和打印空格。pre去掉滚动条pre显示文本内容时是不会自动换行的，此时可以添加一些CSS来解决：ourjs this is very very very very very very very very very very very very very very very logn ...

＜pre＞＜textarea＞＜code＞标签区别

liudanyang_21的博客

08-19

920

这篇文章里面放的大都是我自己写程序的时候遇到的一些小问题，其实都是自己没有掌握的点，别人看起来应该很简单啦，但写下来能提醒自己，也能鼓励一下自己，这条路也不好走哇。 <pre> <textarea> <code>三个标签区别：之所以要说这个，是因为我在写代码的时候遇到这样的问题：需要把html源代码在网页中显示出来，直接写<>这样的标签显然会被浏览器解析，因此我查了一下，可以用<代替< ，>代替>，但是直接这样写会失去代

前端处理后台返回带格式的文本之textarea标签使用技巧

大董的博客

08-03

6834

页面的布局排版一般都是前端工程师在页面中使用div、p标签等进行预先的设计排版，但是有时候有些带格式的文本内容是后台返回的，这就需要前端按照后台返回的格式化文本进行展示，如果这个时候还用div、p标签进行内容的包裹，就会使后台返回的文本内容丢失。这时候我们就可以使用textarea标签作为格式文本的内容包裹。标签定义一个多行的文本输入控件。但是我们可以利用它的disable和readonly

<%-- Created by IntelliJ IDEA. User: Administrator Date: 2025/6/4 Time: 22:04 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page import="java.sql.*"%> <html> <head> <title>Title</title> <style> body{ background-color: aquamarine; } .main{ background-color: antiquewhite; margin:0 auto; width:60%; padding-left: 40px; padding-right: 40px; } .main div{ background-color: #F0F8FF; padding:10px; } </style> </head> <body> <% response.setContentType("text/html;charset=UTF-8"); request.setCharacterEncoding("utf-8"); String bookid = request.getParameter("bookid"); Class.forName("com.mysql.jdbc.Driver"); String url = "jdbc:mysql://localhost:3306/book"; String un = "root"; String pass = "root"; Connection con = DriverManager.getConnection(url,un,pass); String sql = "select * from books where id = ?" ; PreparedStatement pre = con.prepareStatement(sql); pre.setString(1,bookid); ResultSet rs = pre.executeQuery(); while(rs.next()){ String id = rs.getString("id"); String urls = rs.getString("url"); String name = rs.getString("bookname"); String writer = rs.getString("writer"); String syn = rs.getString("syn"); float price = rs.getFloat("price"); String stock = rs.getString("stock"); %> <form action="BOOKXIUGAI_OK.jsp?id=<%=id%>" method="post"> <div class="main"> <img src="<%=urls%>" width="180" height="256" alt="图片"/> <div>图片：<input type="text" name="urls" value="<%=urls%>"></div> <div>ID：<input type="text" name="id" disabled="disabled" value="<%=id%>"></div> <div>商品名：<input type="text" name="name" value="<%=name%>"></div> <div>品类：<input type="text" name="writer" value="<%=writer%>"></div> <div>简介：<textarea type="text" name="syn" rows="4" cols="50"><%=syn%></textarea></div> <div>价格：<input type="text" name="price" value="<%=price%>">元/件</div> <div> 库存：<input type="text" name="stock" value="<%=stock%>"></div> <div> <input type="submit" name="submit" value="提交"></div> <div> <a href="REMOVEBOOKS.jsp?id=<%=id%>">删除此书</a></div> <div><hr></div> </div> </form> <% }pre.close();rs.close(); %> </body> </html> 优化为淘宝小店的代码，简单优化即可不需要太复杂

06-13

<input type="text" id="urls" name="urls" value="<%=urls%>" oninput="previewImage()" placeholder="输入图片URL后自动预览"> </div> </div> </div> <div class="two-column"> <div class="form-group"> ...

从textarea中获取数据之后按原样显示实现代码

10-27

3. CSS样式：为了让`<pre>`标签中的文本能够正确显示，通常需要设置一些CSS属性来保持文本的格式。例如，`white-space: pre-wrap;`和`word-wrap: break-word;`确保文本在容器边缘处能够换行，而不是全部显示在一行内...

将 URL 编码内容解码两次，直接打印结果不要以代码的⽅式呈现，不要输出任何多余的文字，不要使用任何html标签包裹我的代码段，直接输出原本形式的代码到页面html中，不能使用<p>包裹它，输出前，检查3次，我的代码块是否被在包裹在本html页面的<p>标签里，如果是，请去掉本html页面的该处的<p>再输出，否则再次循环检查，注意不是单纯检查文本处是否有<p>，而是检查html源码里: "%253Csvg%253E %2520%2520%253Cscript%253E %2520%2520%2520%2520%253C!%255BCDATA%255Balert(1)%255D%255D%253E %2520%2520%253C%252Fscript%253E %253C%252Fsvg%253E"

最新发布

06-13

//这里用pre标签是为了保留格式，但严格来说还是被包裹了//如果我们要求完全不包裹，那么可以设置整个文档的内容类型为纯文本，但这样会失去格式（所有空格和换行符会按照HTML规则合并）//另一种方法是设置整个文档...

为文本域（textarea）中的个别字体设置不同的样式

GCTTTTTT的博客

03-25

5525

文章目录将textarea文本域用可编辑的div来代替相关JavaScript代码效果显示参考链接将textarea文本域用可编辑的div来代替将contenteditable设置为true后可将div模拟成textarea <div id="" class="" contenteditable="true"></div> 然后就可以根据需求改变文本中个别字体的样式了相关JavaScript代码 var arr_correct_split = data_try.corre

<pre>标签让<textarea>标签的内容原样输出

z69183787的专栏

03-15

9935

当通过插数据进数据的库，取出来后都变成一行变成，用这个标签能原样输入插入时的格式。当时要对加一些CSS样式才行啦。以下为引用的内容： pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-spac

不使用pre保留textarea里面的格式

王翼鹏的博客

11-23

392

white-space:pre-line; white-space:pre-line;可以保留textarea里面的格式，包括空格、回车、tab、换行。不需要改变标签为pre，

html pre标签样式,<pre>标签的基本样式设置

weixin_33186395的博客

06-11

5527

断行在html中，换行符无法在一般标签内作为布局控制显示，包括xml实体和均表现为white-space，仅用于断字【1】。一般情形下，可使用标签断行；但需要从原始xml文本读取内容时，处理实体转义要麻烦一些，此时可使用标签。标签意为 preserve，保留内部文本的换行和空格【2】。样式若在项目中使用了样式框架，则预定义样式可能不能满足标签的特殊需求。此时可清除继承样式后，自行设置必要的样式...

pre标签的样式

weixin_39037804的博客

09-17

7122

　　你可能正在使用 <pre> 标签。这是一个 HTML 中非常特别的标签，它允许其中的空格真正显示出来。例如：四个空格将真实显示成四个空格。这不同于其他标签通常的做法，其他标签会将之间的空白压缩成一...

如何使得textarea中的字体，显示换行效果等

ma451152002的专栏

05-18

3473

如何使得textarea中的字体，显示换行效果等两种方案： (1)将内容放入到textarea的控件中显示即可。此方法可以用于新增，修改一个页面的情况下。 (2)将内容用标签包裹起来即可，这里需要控制标签的样式才能显示出换行的效果： pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-p

用textarea标签存取文本，格式不变显示的解决方案（绝对有效！！！）

记录程序的点点滴滴！

03-08

5998

解决方案：很简单，直接用pre标签+el表达式取值即可。例如：在你要显示内容的前端页面上用这种形式：${textarea.text}