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

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

比如编写如下HTML后:

<table width="400px" border="1px solid;">
<tr>
<td width="20%">abcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdef</td>
<td width="30%">12345567899123455678991234556789912345567899</td>
<td width="50%">testtesttest@test.com</td>
</tr>
</table>

  

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

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

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

<p style="width:200px;">测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。</p>

<p style="width:200px;">test,testtexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttext</p>

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

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

---------------------------------------------------------------------------------

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

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

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

word-break:break-all;

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

------------------------------------------------------------------------------------

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

<style type=”text/css”>
#en_newline{word-break:break-all;}
</style>
<table width="500px" border="1px solid;">
<tr>
<td width="50%" id="en_newline">abcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdef</td>
<td width="30%" id="en_newline">12345567899123455678991234556789912345567899</td>
<td width="20%" id="en_newline">testtesttest@test.com</td>
</tr>
</table>

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

<p style="width:200px;word-wrap : break-word ;">test,testtexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttext</p>

-BY:Colin

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

上一篇:遍历input。select option 选中的值


下一篇:iOS开发探索-高斯模糊&毛玻璃效果