时间: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邮箱联系删除。
强制不换行div{white-space:nowrap;}自动换行div{word-wrap:break-word;word-break:normal;}强制英
复制代码代码如下://按字符换行style="word-break:break-all;"//按词组换行style="word-wrap:break-word;
强制不换行 p{white-space:nowrap;} 自动换行 p{word-wrap:break-word;word-break:normal;
FireFox文本自动换行处理,如何实现FireFox文本自动换行文本自动换行IE中解决方法:word-wrap:break-word;word-break:b
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。它们的区别就在于:1,word-brea