整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML代码中的空格和空行

子1:(文本内容中的连续空格)

<p>这段文本中,输入连续的空格          大概输入了十个。</p>

显示效果:“格”和“大” 之间的是个空格显示出来只是一个空格。

这段文本中,输入连续的空格 大概输入了十个。

例子2:(代码之间的连续空格)

<span>span是一个行内标签</span>               <span>和前面的span元素之间隔了很多个空格</span>

显示效果:两个span元素之间连续的空格,显示出来即"签"与“和”之间的空格,只有一个空格。

span是一个行内标签 和前面的span元素之间隔了很多个空格

上面两个例子证明:HTML代码中连续的空格在显示时会显示为一个空格,其余的多余的空格会被移除或者说被忽略。

段落文本其实也是HTML代码的一部分,只不过它在p标签内部,而例子2的空格是在两个span标签之间。


理解了空格,现在看看空行,同理

例子3:(文本内容中的空行)

<p>这段文本中,输入连续的空行





大概输入了五行。</p>

显示效果:如我们所见,文本代码中的五行空行,显示出来也只是一个空格。

这段文本中,输入连续的空行 大概输入了五行。

例子4:(元素之间/标签之间的空行),只要把例子2中的空格换成空行就可以了,显示效果和例子2的一样,多行空行都只会显示为一个空格。

<span>span是一个行内标签</span>





<span>和前面的span元素之间隔了很多空行</span>


span是一个行内标签 和前面的span元素之间隔了很多空行

得证:HTML 代码中的所有连续的空格或空行(换行)都会被显示为一个空格。


既然如此,如果我们希望扩大两个字符之间的间距,让代码中的连续空格或空行显示出来的结果也是连续的空格或空行,那该怎么办?其实很简单。

方法一:我们可以用预格式化标签<pre>,无论是空格或空行都适用。

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

显示效果

这是
预格式文本。
它保留了      空格
和换行。


方法二:我们可以用空格实体符 代替空格,用换行标签<br/>代替空行。虽然这种方法可以得到我们想要的显示效果,但是对搜索引擎不是最友好的方式,因为 和<br/>在HTML中都是没有语义的。所以建议尽量少用。另外需要注意的是, 必须小写,而且最后面的分号是不能省略的。


方法三:(适合空格)使用全角空格

全角空格被解释为汉字,所以不会被被解释为HTML分隔符,可以按照实际的空格数显示。

问题:怎么使用全角输入法?

以搜狗输入法为例,我们通常使用的是半角输入,其状态栏中有个月亮的标志,就说明正在使用的是半角输入,如果是太阳的标志,就说明使用的是全角输入。全角/半角的切换可以通过点击标志,也可以通过快捷键 Shift+Space(空格符)切换。

半角输入(月亮)

全角输入(太阳)

方法四:使用CSS样式中字间隔属性控制,CSS中的word-spacing 属性可以改变字(单词)之间的标准间隔。我们知道英文中两个单词之间是通过空格隔开的,所以我们视觉上可以这样认为,word-spacing改变了(拉长或缩短)单词之间那个空格的宽度。

方法五:使用CSS样式中的white-space 属性,这个属性声明如何处理元素内的空白符。

描述

normal

默认。空白会被浏览器忽略。

pre

空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap

文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

pre-wrap

保留空白符序列,但是正常地进行换行。

pre-line

合并空白符序列,但是保留换行符。


white-space:normal;就是正常,和不设置一样,连续空格和空行都只会显示一个空格。

white-space:nowrap;不换行是什么意思呢?正常情况下,当我们的文本超出了文本域,文本就会自动折行,这个设置就是说不自动折行了,而是碰到换行标签<br />才换

white-space:pre;和方法一相同,将文本原样输出显示。当文本超出文本域时,不换行,会产生滚动条。

white-space:pre-wrap;保留空格和空行,但当文本超出文本域时,会自动换行。

white-space:pre-line;连续的空格会显示为一个空格,但保留连续的空行。

我们从网页上抓取数据时,有时候会遇到数据被嵌套在HTML标签里的情况,特别是当这些数据是以JSON格式呈现的时候。这些JSON字符串中可能含有许多不必要的空格,使得数据看起来很乱,不易于阅读。

在C#编程语言中,我们可以使用正则表达式来轻松地解决这个问题。通过匹配和替换HTML标签以及连续的空格,我们可以使数据更加整洁,更易于处理。

下面我们用一个具体的例子,说明如何使用C#和正则表达式来清理和处理这些嵌套在HTML中的JSON数据。

假设我们有如下的HTML字符串,其中包含一个JSON数据段:

优化JSON数据格式:使用C#正则表达式去除HTML标签并替换多余空格

我们的目标是提取出这个JSON数据段,去除其中的HTML标签,并将多余的空格替换为单个空格,以便于阅读和解析。

首先,我们需要使用C#的正则表达式来提取出JSON数据段。正则表达式 @"<textarea[^>]*>((.|\n)*?)<\/textarea>"将匹配并提取出位于 <textarea> 和 </textarea> 标签之间的所有内容。

接下来,我们将使用另一个正则表达式 @"\s+" 来匹配一个或多个连续的空格,并将其替换为一个空格。

下面是完成这些步骤的C#代码示例:

// 代码注释:

// 此处运用正则表达式的强大功能,首先定位并剥离HTML标签以提取纯JSON文本;

// 然后,针对JSON文本中的连续空白字符(包括空格、制表符等),使用另一个正则表达式进行查找和替换;

// 最终输出的formattedJsonString是经过整理、仅保留单个空格的格式化JSON字符串。

现在,JSON字符串已经没有多余的空格,格式整洁,易于阅读。这样的数据更便于后续的处理和解析。

预格式化的文本:

<pre>

此例演示如何使用 pre 标签

对空行和 空格

进行控制

</pre>


浏览器支持

目前大多数浏览器支持 <pre> 标签。


标签定义及使用说明

<pre> 标签可定义预格式化的文本。

被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。


提示和注释

提示: <pre> 标签的一个常见应用就是用来表示计算机的源代码。


在HTML 4.01 与 HTML5中的差异

在 HTML 4.01 中,"width" 属性已废弃,不可使用。 HTML5 不支持"width"属性。


属性

属性描述
widthnumberHTML5 不支持该属性。HTML 4.01 已废弃该属性。 定义每行的最大字符数(通常是 40、80 或 132)。

全局属性

<pre> 标签支持全局属性,查看完整属性表 HTML全局属性。


事件属性

<pre> 标签支持所有 HTML事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!