浅谈HTML代码中的空格和空⾏
HTML 代码中的所有连续的空格或空⾏（换⾏）都会被显⽰为⼀个空格。
例⼦1：（⽂本内容中的连续空格）
代码
XML/HTML Code复制内容到剪贴板
1. <p>这段⽂本中，输⼊连续的空格⼤概输⼊了⼗个。</p>
显⽰效果：“格”和“⼤”之间的是个空格显⽰出来只是⼀个空格。
XML/HTML Code复制内容到剪贴板
1. 这段⽂本中，输⼊连续的空格⼤概输⼊了⼗个。
例⼦2：（代码之间的连续空格）
代码
XML/HTML Code复制内容到剪贴板
1. <span>span是⼀个⾏内标签</span>              <span>和前⾯的span元素之间隔了很多个空格</span>
显⽰效果：两个span元素之间连续的空格，显⽰出来即"签"与“和”之间的空格，只有⼀个空格。
XML/HTML Code复制内容到剪贴板
1. span是⼀个⾏内标签和前⾯的span元素之间隔了很多个空格
上⾯两个例⼦证明：HTML代码中连续的空格在显⽰时会显⽰为⼀个空格，其余的多余的空格会被移除或者说被忽略。
段落⽂本其实也是HTML代码的⼀部分，只不过它在p标签内部，⽽例⼦2的空格是在两个span标签之间。
理解了空格，现在看看空⾏，同理
例⼦3：（⽂本内容中的空⾏）
代码
XML/HTML Code复制内容到剪贴板
1. <p>这段⽂本中，输⼊连续的空⾏
2.
3.
4.
5.
6.
7. ⼤概输⼊了五⾏。</p>
显⽰效果：如我们所见，⽂本代码中的五⾏空⾏，显⽰出来也只是⼀个空格。
XML/HTML Code复制内容到剪贴板
1. 这段⽂本中，输⼊连续的空⾏⼤概输⼊了五⾏。
例⼦4：（元素之间/标签之间的空⾏），只要把例⼦2中的空格换成空⾏就可以了，显⽰效果和例⼦2的⼀样，多⾏空⾏都只会显⽰为⼀个空格。
XML/HTML Code复制内容到剪贴板
1. <span>span是⼀个⾏内标签</span>
2.
3.
4.
5.
6.
7. <span>和前⾯的span元素之间隔了很多空⾏</span>
XML/HTML Code复制内容到剪贴板
1. span是⼀个⾏内标签和前⾯的span元素之间隔了很多空⾏
得证：HTML 代码中的所有连续的空格或空⾏（换⾏）都会被显⽰为⼀个空格。
既然如此，如果我们希望扩⼤两个字符之间的间距，让代码中的连续空格或空⾏显⽰出来的结果也是连续的空格或空⾏，那该怎么办？其实很简单。
⽅法⼀：我们可以⽤预格式化标签<pre>，⽆论是空格或空⾏都适⽤。
XML/HTML Code复制内容到剪贴板
1. <pre>
2. 这是
3. 预格式⽂本。
4. 它保留了空格
5. 和换⾏。
6. </pre>
显⽰效果
XML/HTML Code复制内容到剪贴板
1. 这是
2. 预格式⽂本。
3. 它保留了空格
4. 和换⾏。
⽅法⼆：我们可以⽤空格实体符 ；代替空格，⽤换⾏标签<br/>代替空⾏。虽然这种⽅法可以得到我们想要的显⽰效果，但是对搜索引擎不是最友好的⽅式，因为 ；和<br/>在HTML中都是没有语义的。所以建议尽量少⽤。另外需要注意的是，  必须⼩写，⽽且最后⾯的分号是不能省略的。
⽅法三：（适合空格）使⽤全⾓空格
全⾓空格被解释为汉字，所以不会被被解释为HTML分隔符，可以按照实际的空格数显⽰。
问题：怎么使⽤全⾓输⼊法？
以搜狗输⼊法为例，我们通常使⽤的是半⾓输⼊，其状态栏中有个⽉亮的标志，就说明正在使⽤的是半⾓输⼊，如果是太阳的标志，就说明使⽤的是全⾓输⼊。全⾓/半⾓的切换可以通过点击标志，也可以通过快捷键 Shift+Space（空格符）切换。
半⾓输⼊（⽉亮）全⾓输⼊（太阳）
网页设计html代码大全空格⽅法四：使⽤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代码中的空格和空⾏全部内容了，希望⼤家多多⽀持~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。