解决英文或数字在HTMl网页中不自动换行。
2013-06-26 15:08
399 查看
对于网页设计的新手而言,在接触一段时间的HTML/CSS后,一定会遇到这样的问题:对于已经定义了宽度的容器(如DIV,TD,段落等)如果里面出现了较长的英文或数字,则内容不能自动换行然后会将框架撑出设定的宽度。
比如编写如下HTML后:
得到的结果却是这样,因为内容没有自动换行,所以框被撑得很宽。定义的400px的宽度,但现在表格已经被撑大到940px了。
没看懂?再举一个例子,下面是两段定义了宽度的段落:
<p style="width:200px;">测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。</p>
中文显示效果和英文显示效果如下(英文跟本不会换行,所以定义了宽度无效):
---------------------------------------------------------------------------------
其实这种问题很简单,只需要定义一个属性就行了。
解决方法(定义如下属性):
word-wrap : break-word ;(推荐用第一种)
或
word-break:break-all;
至此,了解CSS的朋友应该看到属性后就能够马上搞定问题了。
------------------------------------------------------------------------------------
如果是新手。可以参考我下面写出来的例子来套用。
对于段落也是一样的(也可以直接使用)。
-BY:Colin
尊重他人劳动成果,转载请注明作者及出处,谢谢合作。
比如编写如下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了。
没看懂?再举一个例子,下面是两段定义了宽度的段落:
<p style="width:200px;">测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。测试,测试文本,我是中文。</p>
<p style="width:200px;">test,testtexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttext</p>
中文显示效果和英文显示效果如下(英文跟本不会换行,所以定义了宽度无效):
---------------------------------------------------------------------------------
其实这种问题很简单,只需要定义一个属性就行了。
解决方法(定义如下属性):
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
尊重他人劳动成果,转载请注明作者及出处,谢谢合作。
相关文章推荐
- xhtmlrenderer进行HTML转PDF【解决中文、数字、英文过长自动换行问题】
- html td 换行-解决长串英文字母或者数字不能自动换行的问题
- textarea标签内容为(英文或数字不自动换行)的解决方法
- css解决英文字符与阿位伯数字自动换行
- 关于在html中数字和英文不换行的解决方法
- 数字、英文不自动换行的解决办法
- css解决英文字符与阿伯数字自动换行
- css解决英文字符与阿伯数字自动换行
- 英文或数字能使容器被撑大的解决方法--自动换行
- 网页数字、英文强制自动换行
- 解决html 展示一长串数字不能自动换行
- css 解决英文字符与阿位伯数字自动换行
- html5 连续的数字、英文不自动换行的解决办法
- css解决英文字符与阿位伯数字自动换行
- 解决html 展示一长串数字不能自动换行
- Html 解决长串英文字母显示不能自动换行
- 解决ckeditor编辑器单个英文单词过长所引起的不自动换行
- Html页面纯数字或者纯字母不能换行的解决办法
- css解决数字字母自动换行
- CSS解决无空格太长的字母,数字不会自动换行的问题