【学习笔记】HTML -  

96 阅读1分钟

1. 如何运用非折断空白?

在阅读到W3C上的这篇文章More advanced featuresHow to introduce non-breaking spaces这段时,才突然明白 不仅仅是在HTML中表示空白,正如其名,nbsp:non-breaking spaces(非折断空白) 的意思。它可以用来阻止一段文本中的两个特定的相邻的单词之间不出现换行。

没有使用 

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>

注意看,第二行的最后,LoremIpsum之间的空白被换行了。

localhost_3000_.png

在HTML代码中,把空白字符换成&nbsp;:

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem&nbsp;Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>

再看下效果,第二行的最后的LoremIpsum之间的空白没有变成换行,一起排版到第三行去了:

localhost_3000_ (1).png

以上。