Question

在我的日常工作中，有一些CSS3新特性会被经常使用，还有一些则基本不用。在开始冗长的讲解之前，我想先给大家分享几个能让工作更轻松的CSS3小技巧，尤其是响应式设计方面的，用它们可以完成以前会让人头疼的简单任务。

5.4.1　CSS3多栏布局

曾经有需要将一整段文本显示在多个栏位中？在CSS3出现之前，你必须将内容拆分到不同的标签中，然后分别设定样式。因为样式原因而修改标签永远不是什么好做法。CSS3可以让我们将一段或多段内容分布到多列网格中。请看如下代码：

你可以通过设定具体栏位宽度（如12em）或者栏位数量（如3）来使内容分布在多列网格中，做法如下。

如果设定栏位宽度，语法如下所示（注意，为简洁起见代码中省略了私有前缀）：

按照上述的设定，无论视口尺寸是多少，内容都会分布在宽度为12em的栏位中。视口尺寸发生变化之后，浏览器会自动调整栏位数量。

如在视口宽度1024像素的Safari浏览器中效果如下：

而下图则展示了相同页面在视口宽度为768像素的iPad上的显示效果：

只需极少量代码就能完成这样精美的响应式布局——我喜欢！

如果你想保持栏位数量不变而让栏位宽度根据视口自动调整，可以参考如下代码：

增加栏位间隙和分割线

增加栏位间隙和分割线可以让多列布局的效果更好，代码如下：

效果如下图：

若想参阅CSS3多列布局模块的标准，请访问http://www.w3.org/TR/css3-multicol/。目前，请切记你需要给多列布局声明使用私有前缀，以确保兼容最广泛的浏览器。

5.4.2　文字换行

有多少次你必须得将一个很长的URL地址放置在一个狭小的空间内？结果很让你扫兴吧？请看下面截图中的问题，注意页面右下角的URL地址已经超出了它的范围：

CSS3使用了一个简单的声明解决了这个问题，凑巧的是老版本IE均支持该声明，甚至可以追溯到IE 5.5！

给外层的包裹元素追加该声明后，产生的效果如下图所示。接下来是见证奇迹的时刻，超长的URL完美换行了！