在阮一峰大神的博客中发现空格原来可以有多种处理方式,过去只知道用
$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>
<p>
寒蝉凄切,对长亭晚, 骤雨初歇。
都门帐饮无绪,留恋处,兰舟催发。
执手相看泪眼,竟无语凝噎。
念去去,千里烟波,暮霭沉沉楚天阔。
多情自古伤离别,更那堪 冷落清秋节!
今宵酒醒何处?杨柳岸,晓风残月。
此去经年,应是良辰好景虚设。
便纵有千种风情,更与何人说?
</p>
效果如下:
可以看出,添加了pre-line会在normal的基础上保留换行符。这就是它们两者唯一的区别。
以上。
3、参考链接
[1] 阮一峰-CSS 的空格处理