关于html中⽂字空格以及换⾏符的处理
在阮⼀峰⼤神的中发现空格原来可以有多种处理⽅式，过去只知道⽤$nbsp；真是惭愧。长路漫漫吖
⽬录
1、html⾥⾯的空格
在html⾥⾯，空格和换⾏符都会被处理成⼀个空格。这样在遇到需要多个空格或者换⾏的时候就会出现⿇烦。这⾥根据阮⼀峰⼤神的博客做了整理。
2、怎样原样显⽰空格和换⾏符
主要有两种⽅法，⼀种是针对html标签，另⼀种是通过css样式。
2.1 使⽤pre标签
pre标签不会对空格和换⾏符做处理，如下：
<pre>
寒蝉凄切，对长亭晚，骤⾬初歇。
都门帐饮⽆绪，留恋处，兰⾈催发。
执⼿相看泪眼，竟⽆语凝噎。
念去去，千⾥烟波，暮霭沉沉楚天阔。
多情⾃古伤离别，更那堪冷落清秋节！
今宵酒醒何处？杨柳岸，晓风残⽉。
此去经年，应是良⾠好景虚设。
便纵有千种风情，更与何⼈说
</pre>
效果如下：
可以看出，pre标签很好的保留了换⾏符，另外，在更那堪和冷落清秋节！之间的空格也保留了下来。
2.2 使⽤white-space设置样式
white-space是⼀个⽤来设置⽂字的样式，平常我们常⽤的是white-space: nowrap；来阻⽌⽂字换⾏，其实除了这个以外还有其余⼏
个。white-space有如下值可以设置：
white-space: inherit; 继承⽗级样式。
white-space: normal; 默认值，即平常见到的那种。
white-space: nowrap; 强制使⽂字⼀⾏显⽰。
white-space: pre; 设置后效果和 pre 标签⼀样。容器宽度太⼩时⽂字会超出容器。
white-space: pre-wrap; 就是在 pre 的基础上正常地进⾏换⾏。
white-space: pre-line; 就是在 normal 的基础上保留了换⾏符。但是空格还是和normal⼀样的处理。
前三个没什么好说的，主要是后三个。如下：
<style>
p{
width: 300px;
white-space: pre;
background-color: pink;
}
</style>
<p>
寒蝉凄切，对长亭晚，骤⾬初歇。
都门帐饮⽆绪，留恋处，兰⾈催发。
执⼿相看泪眼，竟⽆语凝噎。
念去去，千⾥烟波，暮霭沉沉楚天阔。
多情⾃古伤离别，更那堪冷落清秋节！
今宵酒醒何处？杨柳岸，晓风残⽉。
此去经年，应是良⾠好景虚设。
便纵有千种风情，更与何⼈说
</p>
<p>
寒蝉凄切，对长亭晚，骤⾬初歇。都门帐饮⽆绪，留恋处，兰⾈催发。执⼿相看泪眼，竟⽆语凝噎。
念去去，千⾥烟波，暮霭沉沉楚天阔。
多情⾃古伤离别，更那堪冷落清秋节！
今宵酒醒何处？杨柳岸，晓风残⽉。
此去经年，应是良⾠好景虚设。
便纵有千种风情，更与何⼈说
</p>
效果如下：
<style>
p{
width: 300px;
white-space: pre-wrap;
background-color: pink;
}
</style>
<p>
寒蝉凄切，对长亭晚，骤⾬初歇。都门帐饮⽆绪，留恋处，兰⾈催发。执⼿相看泪眼，竟⽆语凝噎。
念去去，千⾥烟波，暮霭沉沉楚天阔。
多情⾃古伤离别，更那堪冷落清秋节！
今宵酒醒何处？杨柳岸，晓风残⽉。
此去经年，应是良⾠好景虚设。
便纵有千种风情，更与何⼈说
</p>
效果如下：
可以看出保留了换⾏符且还会根据元素宽度⾃动换⾏。
<style>
p{
width: 300px;
white-space: pre-line;
background-color: pink;
}
</style>
html中的5种空格表示
<p>
寒蝉凄切，对长亭晚，骤⾬初歇。
都门帐饮⽆绪，留恋处，兰⾈催发。
执⼿相看泪眼，竟⽆语凝噎。
念去去，千⾥烟波，暮霭沉沉楚天阔。
多情⾃古伤离别，更那堪冷落清秋节！
今宵酒醒何处？杨柳岸，晓风残⽉。
此去经年，应是良⾠好景虚设。
便纵有千种风情，更与何⼈说？
</p>
效果如下：
可以看出，添加了pre-line会在normal的基础上保留换⾏符。这就是它们两者唯⼀的区别。以上。
3、参考链接
[1]

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