css代码用词,巧用CSS解决中文断词换行的问题

中文词组有没有办法禁止它拆字换行？

控制英文单词是否断词换行，方法很多，在这里不做讨论。

中文字由于是由单个汉字组成，所以禁止拆分词组换行，实现起来就没那么容易。在这里就介绍一个实现禁止中文词组换行的方法：

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

代码：

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

哈尔滨 成都

效果：

北京 上海 广州 深圳 天津 呼和哈特 重庆

武汉 沈阳 杭州 哈尔滨 成都

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

代码：

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

杭州 哈尔滨 成都

效果：

北京

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

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

代码如下：

style="white-space:nowrap;">北京

style="white-space:nowrap;">上海

style="white-space:nowrap;">广州

style="white-space:nowrap;">深圳

style="white-space:nowrap;">天津

style="white-space:nowrap;">呼和哈特

 

style="white-space:nowrap;">重庆

style="white-space:nowrap;">武汉

style="white-space:nowrap;">沈阳

杭州

哈尔滨

style="white-space:nowrap;">成都

效果如下：

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

大功告成了！