失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > css代码用词 巧用CSS解决中文断词换行的问题

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

时间:2020-08-19 23:38:02

相关推荐

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;">成都

效果如下:

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

大功告成了!

如果觉得《css代码用词 巧用CSS解决中文断词换行的问题》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。