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

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


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

代码:

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

效果:

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

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

代码:

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

效果:

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

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

代码如下:

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

效果如下:

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

大功告成了!

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

你可能感兴趣的:(网站前端)