解决英文或数字在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了。

没看懂？再举一个例子，下面是两段定义了宽度的段落：

<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

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

转载于:https://www.cnblogs.com/colinliu/p/3250491.html

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

解决Vista老版本无法在网页中使用五笔及搜狗拼音
需要先选择桌面上的"Internet Explorer"图标.运行IE7.如下图. 运行IE7后,找到最右边的"工具"按钮,点击他.如下图. 点击"工 ...
关于直接在网页中插入mp4视频实际应用中经历的那些事儿
一:实现点击图片任意位置可播放视频. 大家都知道,如果直接用Video标签插入视频的话,直接点击画面是不能实现播放功能的.只能用controls属性为视频加上控制栏,点击控制栏中的播放按钮才可以播放. ...
极速系列04—python批量获取word/PDF/网页中的表格
这里写目录标题 1 python批量获取word中的表格目的: 1.1 简介 1.2 读取word文档内容方法一方法二 2 python批量获取PDF中的表格目的: 2.1 简介 2.2 读取 ...
怎么在html中复制粘贴图片,在网页中粘贴截图那些事儿
原标题:在网页中粘贴截图那些事儿 (点击上方公众号,可快速关注) 作者:郑武江(@OAuth_v2) 链接:seejs.me/2016/11/30/paste-snapshot/ 做这个尝试,只为了解 ...
HTML数字项目标签千位分隔符,请使用千位分隔符(逗号)表示web网页中的大数字
一.移动端大数值会默认当作电话号码在手机等移动设备上,对于超过一定个数的数值,系统默认会当做电话号码处理,而不是一个数字按照中文用户的使用习惯,有时候个数很多的连续数字其实真的就是一个数字,自动变 ...
js手机键盘遮挡_完美解决手机网页中输入框被输入法遮挡的问题
之前要做一个弹出对话框,填写信息,发现在手机上看的时候,较后的输入框在填写信息时,输入框被输入法遮挡,只能盲填. 前提 1.弹出的对话框用display:fixed定位的 2.对话框大小固定解决办法 ...
手机端网页中图片之间出现白线的解决方法
手机端网页中图片之间出现白线的解决方法参考文章: (1)手机端网页中图片之间出现白线的解决方法 (2)https://www.cnblogs.com/syzdidi/p/9686463.html 备 ...
在网页中显示数字时钟
<html> <head> <title>实时走动的数字时钟</title> </head> <script> function ...
解决网页中不能复制文字的问题
解决网页中不能复制文字的问题 1.在浏览器中按f12,找到console(控制台) 输入一下javascript代码 let text= document.getElementsByTagName(' ...

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

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

最新文章

热门文章