Detailed explanation of various displays of spaces in Html

一、使用全角空格

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

二、使用空格的替代符号

替代符号就是在需要显示空格的地方加入替代符号，这些符号会被浏览器解释为空格显示。

空格的替代符号有以下几种：

名称编号描述  不断行的空白（1个字符宽度）  半个空白（1个字符宽度）  一个空白（2个字符宽度）  窄空白（小于1个字符宽度）

可以用名称或编号作为空格的替代符号，名称必须小写，末尾的“;”不能省略。

如：

欢  迎  光  临！

显示效果为：欢 迎 光 临！

三、使用CSS的 white-space 属性

CSS的white-space属性用于设置文本中空格的处理方式，当white-space属性取值为pre时，浏览器会保留文本中的空格和换行，这样你就可以直接在文本中使用空格和回车了。

这种方法特别适合于在网页中显示程序代码。比如：显示一段C程序代码。

<p style="white-space:pre">
int sub(int x,int y){    
int z;    
if( x&gt;y )        
z = x-y;    
else        
z = y-x;    
return z;}</p>

显示效果为：

int sub(int x,int y){    
int z;    
if( x>y )        
z = x-y;    
else        
z = y-x;    
return z;}

使用HTML的

标签也可以达到类似的效果，但<pre class="brush:php;toolbar:false">标签有一些不太好的特性，不如使用CSS的white-space属性更方便。<br/></p><p>四、使用CSS的 letter-spacing 属性</p><p>CSS的letter-spacing属性用于设置文本中字符之间的间隔，它的取值可以是一个带单位的长度值，浏览器会在字和字之间设置指定长度的空白。比如：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><p style="letter-spacing:30px">欢迎光临！</p>

Copy after login

显示效果为：

欢迎光临！

注意，如果文本中有英文单词，则空白会加在字母之间，而不是单词之间。

五、使用CSS的 word-spacing 属性

CSS的word-spacing属性用于设置文本中单词之间的间隔，它的取值可以是一个带单位的长度值，浏览器会在单词和单词之间设置指定长度的空白。比如：

<p style="word-spacing:30px">Happy new year!</p>

显示效果为：

Happy new year!

注意，HTML是以空格来区分单词的，它会把单词间的空白按指定长度显示。

六、使用CSS的 text-indent 属性

CSS的text-indent属性用于设置首行缩进，它的取值可以是一个带单位的长度值，浏览器会在段落的首行开始处设置指定长度的空白。比如：

<p style="text-indent:2em">欢迎光临！</p>

显示效果为：

欢迎光临！

说明：em 是一个相对长度单位，2em 表示要缩进两个字的距离。

The above is the detailed content of Detailed explanation of various displays of spaces in Html. For more information, please follow other related articles on the PHP Chinese website!