＜pre＞＜/pre＞标签和css的white-space属性

最新推荐文章于 2025-03-22 17:51:31 发布
最新推荐文章于 2025-03-22 17:51:31 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： html/css/js 文章标签： CSS white-space pre标签 文本格式 HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44771388/article/details/110404984
版权

标签 pre和css的white-space属性

今天看书发现css的段落属性有一个white-space属性，用来处理空白
white-space属性有三个值
1.normal:默认属性。即将连续的多个空格合并
2.pre：将源代码中的空格和换行符保留
3.norwrap:强制在同一行显示所有文本

突然就想到，这个white-space：pre和pre标签有没有什么不同？如果有需要的话要用哪个？
所以我就试了试
代码如下：
在这里插入图片描述
运行效果如下：
在这里插入图片描述
可以看到两段文字都达到了我们想要的效果，而且在段落里插入的a标签也都有预留文本的效果
这个时候我们打开f12看一下Element：
在这里插入图片描述

在这里插入图片描述
我们发现无论是pre标签还是p标签都有white-space：pre；这个属性
那么我们把pre标签的white-space设置为normal看一下效果
在这里插入图片描述
pre标签的预留效果没有了，所以我得出结论是，pre和css的white-space属性是一样的，并无区别。

如果这篇文章有错误的话，还请指正

CSS之 white-space : pre
iteye_3352的博客
06-15 463
[b]在 github 的代码浏览页面，可以看到这样的 css 样式：[/b] [code="html"] throw new Error( " Chartbeat: Please specify an api key and host! " ); .blob-code-inner { ...
white-space: pre；与white-space: pre-line；的区别
程序人生
08-27 1497
忽略换行符的自动换行：不会根据容器的宽度自动换行，而是按照原始文本中的换行符进行换行。则会合并连续的空白字符、忽略原始文本中的换行符，并且不会保留缩进效果。自动换行：根据容器的宽度自动换行，忽略原始文本中的换行符。忽略缩进效果：不会保留文本中的缩进，所有内容都左对齐显示。合并空白字符：连续的空格和换行符会被合并为一个空格。会保留原始文本中的空白字符、换行符和缩进效果，而。保留缩进效果：如果文本中存在缩进，将会被保留。保留空白字符：连续的空格和换行符会被保留。
css white-space: pre-line； 用处大
m0_65730686的博客
03-22 485
3.nowrap:只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。6.inherit：从父元素继承white-space属性的值。2.pre:保留空白(行为方式类似于html中的pre标签)；1.normal:忽略多余的空白，只保留一个空白（默认）；4.pre-wrap:保留空白符序列，正常地进行换行；
css中white-space 属性：“pre”, “pre-line”, “pre-wrap” “nowrap”的区别
热门推荐
赶路人儿
07-22 3万+
在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示，取值有： normal：默认，忽略文本中所有的空白、换行符；只有文本存在 <br> 或文本达到框的约束时，文本才会换行 nowrap：和normal类似，忽略文本中所有的空白、换行符；遇到框的宽度约束时不会自动换行，文本只有在有 br 时才会换行 pre：保留文本中的空白、换行符；遇到框的宽度约束时不会自动换行，文本存在 <br> 或文本中有换行符时，文本才会换行 pre-wrap：和
HTML的<pre></pre>标签
weixin_30729609的博客
09-08 308
定义和用法 pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 <pre> 标签的一个常见应用就是用来表示计算机的源代码。 可以导致段落断开的标签（例如标题、<p>和<address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为...
html pre 元素
weixin_33713503的博客
05-30 180
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 转载于:https://www.cnblogs.com/qiuh/archive/2013/05/30/3109028.html...
为什么我的details标签中的代码单独出来了，不在标签里面。下边是我的代码 <details> <summary>📜 完整炼成阵代码（点击展开）</summary> ```html <!DOCTYPE html> <html> <head> </head> <body> <div class="container"> <div class="taiji"></div> </div> </body> </html> ``` </details>
最新发布
04-28
需要使用$<pre>$和$<code>$标签组合来正确保留代码格式： ```html <details> <summary>查看代码</summary> <pre><code> function example() { console.log("Hello World"); } </code></pre> </details> ``` 2. **...
CSS属性 - white-space 空白属性使用说明
10-30
当我们设置 white-space 属性为 pre 时，文本将保留所有的换行和空白符，包括换行符、空格和制表符。这意味着，文本将显示所有的空白符，包括多余的空格。需要注意的是，这个值只有在声明了！DOCTYPE 并且浏览器版本...
开票明细信息列表的发票号垂直居中并且如果发票号过长自动换行 <ul class="wt-bread" style="padding-top: 0;"> <li><a href="javascript:;" url="${base}/w/credit/pay">发票管理</a> <i></i></li> <li><a href="javascript:;" url="${base}/w/invoice">我的发票</a> <i></i></li> <li><a href="javascript:;">我的发票详情</a> <i></i></li> </ul> <div class="wt-bind"> <#if result.isInvoice==1>您的订单已开票，已开票总额 <#else>您的订单待开票，应开票总额</#if><span class="wt-red-1">￥${result.subOrderAmount}</span> <div class="pay-shop" style="padding: 0;"> <!-- <i class="icon-shop-logo"></i> --> <img src="${shop.logoUrl}" alt="" style="width: 18px;"> <span class="font-size-14"><a href="${base}/w/shop/s/${shop.merchantId}" target="_blank">${shop.shopName}</a></span> <i class="icon-shop-concat"> <div class="customer-service-1 customer-service-new" style="display: none;"> <#if shop.configId!=null> <
04-23
<think>好的，用户想实现发票号在开票明细信息列表中垂直居中，并且当发票号过长时自动换行的CSS样式调整。我需要仔细分析这个问题，提供正确的解决方案。 首先，垂直居中通常可以用Flexbox或者Grid布局来实现。...
我正在编辑【php】代码，遇到了提交后无法换行的问题 ，请帮我检查并改正错误点。我的原始代码如下： 【<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /> <title>无标题文档</title> </head> <body> <form id=“forml” name=“forml” action=“” method=“post”> <table width=“200” align=“center” border=“1”> <tr> <td width=“188”><label><textarea name=“a” id=“a” cols=“20” rows=“5” wrap=“soft”>我使用的是软回车!输出后不换行!</textarea></label></td> <td width=“351”><label><textarea name=“b” id=“b” cols=“20” rows=“5” wrap=“hard”>我使用的是硬回车!输出后自动换行!</textarea></label></td> </tr> <tr> <td colspan=“2” align=“center”><label><input type=“submit” id=“submit” name=“submit” value=“提交” /></label></td> </tr> </table> </form> <?php if($_POST[‘Submit’]==“提交”){ echo n12br($_POST[‘a’]).“<br>”; echo n12br($_POST[‘b’]); } ?> </body> </html> 】
04-03
<think>好的，我现在需要帮助用户解决PHP代码中提交后无法换行的问题。首先，我得仔细看一下用户提供的代码，找... white-space: pre-wrap; /* 保留换行和空白 */ word-break: break-all; /* 长文本自动换行 */ } ```
<pre> Line Wrapper-crx插件
04-04
语言:English (United States) ... tags:pre { white-space: pre-wrap; }This takes effect immediately on all active pages.I've published the (very short) source code under the Apache 2.0 license.
css white-space属性详解
wangongchao的博客
02-27 2万+
css white-space属性详解
关于 white-space: pre-wrap;的灵异现象
annuobin1120的博客
07-27 919
其中pre-wrap 要谨慎使用，因为它会导致一个空标签莫名其妙的有了高度 转载于:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/7244847.html
html中的<pre></pre>
梦想天空
11-11 201
利用这个标签可以将其包起来的文字排版、格式，原封不动的呈现出来。算是相当好用的标签之一。也就是说你输入的东西被原封不动的输出,包括你输入的空格之类的,不用 和等来表示空格或者回车了，直接按键盘的空格键和回车键就行 ...
<pre><pre/>
jiaxiaoyan127的博客
12-20 496
前言今天在后台textarea文本框里输入空格和换行在前台的手机端显示时，就变成了一段文字此处可以在前台的文字显示的地方加上 pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体接下来一个大坑等着我们啦！里面的文本没有自动换行啊：此时css应加： { word-wrap: break-word; white-spac
＜pre＞＜/pre＞、＜iframe＞＜/iframe＞、＜marquee＞＜/marquee＞
qq_43812504的博客
01-21 481
<pre></pre> 在<pre>标签中能够预定义格式化的文本，在中的文本通常会保留空格和换行符，文本也会呈现等宽字体。 <pre>标签的常见应用就是用来表示计算机的源代码。 <pre>元素是块级元素 <pre>只能包含文本和行内元素，块级元素不能放在其中 制表符tab在<pre>标签定义的块当中可以起到应有的作用，每个制表符占据8个字符的位置，但并不推荐使用tab，因为在不同的浏览器中，tab的表现形式各不相同。在用&
div+css实现文本原格式显示与自动换行
outstandzhou的专栏
02-27 6910
html的标签用可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 而为了限制文本显示的范围，一般使用div+css设定自动换行或缩略等样式。对于未知的文本格式，如果要求文本单行过长时换行显示，并且保留原文本的空格和换行符，就可以通过div+pre标签的组合，再分别设定各自的样式来实现（pre标签一般不适用width属性） TEST
white-space属性
小马过河
01-07 3万+
在css中，white-space属性是用来定义元素内的空白该如何处理。 white-space属性值 normal：忽略多余的空白，只保留一个空白（默认）； pre：保留空白(行为方式类似于html中的pre标签)； nowrap：只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。 pre-wrap：保留空白符序列，正常地进行换行； pre-line：合并空白符...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值