浅谈HTML代码中的空格和空行

2019-01-15 09:11:10丽君

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

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

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

     

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

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

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

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

                半角输入(月亮)                                   全角输入(太阳)

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

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

    描述
    normal 默认。空白会被浏览器忽略。
    pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
    pre-wrap 保留空白符序列,但是正常地进行换行。
    pre-line 合并空白符序列,但是保留换行符。