解决英文或数字在HTMl网页中不自动换行的问题。

对于网页设计的新手而言,在接触一段时间的HTML/CSS后,一定会遇到这样的问题:对于已经定义了宽度的容器(如DIV,TD,段落等)如果里面出现了较长的英文或数字,则内容不能自动换行然后会将框架撑出设定的宽度。

比如编写如下HTML后:

得到的结果却是这样,因为内容没有自动换行,所以框被撑得很宽。定义的400px的宽度,但现在表格已经被撑大到940px了。

HTML

没看懂?再举一个例子,下面是两段定义了宽度的段落:

 

中文显示效果和英文显示效果如下(英文跟本不会换行,所以定义了宽度无效):

HTML

———————————————————————————

其实这种问题很简单,只需要定义一个属性就行了。

解决方法(定义如下属性):

word-wrap : break-word ;(推荐用第一种)

word-break:break-all;

 

至此,了解CSS的朋友应该看到属性后就能够马上搞定问题了。

————————————————————————————

如果是新手。可以参考我下面写出来的例子来套用。

 

对于段落也是一样的(也可以直接使用)。

 

BY:Colin

尊重他人劳动成果,转载请注明作者及出处,谢谢合作。

原文链接:,转发请注明来源!