HTML 5 基础之 文本 强制不换行

在我们开发网站的过程中常常会遇到文本被强制换行的情况发生，比如：

强制换行案例

图中一个完整的 a 标签被活生生截断（强制换行），这往往不是我们所想要的，但是这也是我们无法避免的，因为在网站开发过程中，我们往往无法做到精确计算出能够完美展示所容纳文本格式的空间大小。

遇到这种情况一般的处理思路要么想办法算距离，要么一点一点的调节以达到预期要求，但是，这样做既费时又费力，那么有什么办法能一劳永逸呢？

其实 CSS 为我们提供了 white-space 属性
通过设置

a{white-space:nowrap;}

可以规定一个完整的 a 标签中的文本不进行换行，修改后的效果如图：

修改后的效果图

当然不仅仅是 a 标签，在开发过程中我们可以对任意的一个文本整体设定这一属性，这样一来便不会出现一个整体被截断的情况了。

---

下面对 white-space 属性做一个小结：

white-space 属性指定元素内的空白怎样处理。

属性值

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。