巧用CSS解决中文断词换行的问题

中文词组有没有办法禁止它拆字换行？
控制英文单词是否断词换行，方法很多，在这里不做讨论。
中文字由于是由单个汉字组成，所以禁止拆分词组换行，实现起来就没那么容易。在这里就介绍一个实现禁止中文词组换行的方法：

例1：默认情况下是这样的。

代码：

<div style="width:220px; background:#ddd;">北京 上海 广州 深圳 天津 呼和哈特 重庆 武汉 沈阳 杭州 哈尔滨 成都</div>

效果：

北京 上海 广州 深圳 天津 呼和哈特 重庆 武汉 沈阳 杭州 哈尔滨 成都

例2：使用禁止换行（white-space: nowrap;）会让整段文字都不换行。

代码：

<div style="width:220px; background:#ddd; white-space: nowrap;">北京 上海 广州 深圳 天津 呼和哈特 重庆 武汉 沈阳 杭州 哈尔滨 成都</div>

效果：

北京 上海 广州 深圳 天津 呼和哈特 重庆 武汉 沈阳 杭州 哈尔滨 成都

例3：给各个词组套一个带禁止换行（white-space: nowrap;）的span标签。

代码如下：

<div style="width:220px; background:#ddd;"><span style="white-space:nowrap;">北京</span> <span style="white-space:nowrap;">上海</span> <span style="white-space:nowrap;">广州</span> <span style="white-space:nowrap;">深圳</span> <span style="white-space:nowrap;">天津</span>  <span style="white-space:nowrap;">呼和哈特</span>  <span style="white-space:nowrap;">重庆</span> <span style="white-space:nowrap;">武汉</span> <span style="white-space:nowrap;">沈阳</span> <span style="white-space:nowrap;">杭州 哈尔滨</span> <span style="white-space:nowrap;">成都</span></div>

效果如下：

北京 上海 广州 深圳 天津 呼和哈特 重庆 武汉 沈阳 杭州 哈尔滨 成都

大功告成了！

原文地址： http://blog.sina.com.cn/s/blog_7db0c22a0101bk1o.html