使用word-wrap和word-break让网页中长英文字符串自动换行

时间:2021-05-02

在制作网页或为网站添加内容时,我们可能遇到这种情况,当较长的英文字符串或数字字符串不会自动换行,从而撑破块的宽度,这样使得文档的布局显得非常凌乱,本文将会告诉你解决此类问题的方法。

实际上,在我们进行维护网页时,当输入的内容达到块的宽度时,汉字可以很好地自动进行换行,而数字和英文字符不行,这主要是为了保持数字和英文串的完整性,但这会撑破块的宽度,从而造成网页布局非常难看,解决的方法就是借助样式表中的word-wrap和word-break属性。下面将介绍一下这两个属性:

(1)word-wrap用来控制换行:

其取值有两种:normal和break-word

break-word用来强制换行,内容将在块的边界内换行,中文不会出现任何问题,英文语句也没问题。但是对于长串的英文,不会起任何作用。

(2)word-break用来控制断词:

其取值有三种情况:normal,break-all和keep-all。

break-all是强制断开单词。使用本值时,在单词到达块的边界时,下个字母自动到下一行。这个值就很好地解决了了长串英文的问题。

keep-all是指在中文(Chinese),日文(Japanese)和韩文(Korean)时不断词,一句话一行,使用此值可以用来排列古诗语句。

知道了让面这两个属性及取值情况,我们的问题就很好地解决了,我们在需要进行换行的块样式中加入以下两个样式即可:

word-wrap:break-word;word-break:break-all;

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章