关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法
一.问题产生的原因
当我们为div标签声明了宽度,但是仍然会出现文本越界的情况,不知道大家有没有发现,只有文本内容为单词或者纯数字的时候才会出现这种情况为此我特意测试了两种情况,结果如下:
①当文本内容为纯数字或者字母:


②当文本内容为汉字:


所以我们可以得出结论:浏览器在解析我们页面的时候,给这一串数字当成一个词了,这样就不会自动切断字符串而进行换行。
二.解决方法
①word-wrap:break-word (例如div宽200px,它的内容就会到200px自动换行)
②word-break:break-all (相比较于上面的方法,这种方法的好处在于假如在宽度的范围内的临界区存在一个完整的单词,它会保留一个完整的单词自动换行)
下面让我们来测试一下


这样我们就可以看见字母自动换行了!!!
关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法的更多相关文章
- asp.Net2.0中TextBox设置只读后后台获取不到值的解决方法
http://www.cnblogs.com/yxyht/archive/2013/03/02/2939883.html ASP.NET中TextBox控件设置ReadOnly="tru ...
- .NET中TextBox控件设置ReadOnly=true后台取不到值的解决方法
在.NET 2.0 下,当页面上的某个TextBox 设置了属性ReadOnly="True"时,通过客户端脚本给其赋值后,在后台代码中访问其Text属性却无法获得该值.经过尝试, ...
- UIView 设置alpha后, 子view也随着变化alpha, 解决方法
// _closeContainerBar.alpha = 0.7; _closeContainerBar.backgroundColor = [[UIColor blackColor] ...
- HTML中Meta标签中http-equiv属性小结
HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...
- HTML中Meta标签中http-equiv属性
HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...
- 关于django中input标签中file类型以及开路由
0825自我总结 关于django中input标签中file类型 1.input提交图片实时展示 <img src="/static/img/default.png" wid ...
- odoo开发笔记 -- div标签代替odoo button写法
odoo开发笔记 -- div标签代替odoo button写法 并调用自定义js <footer> <div id="confirm_request_cloud_repo ...
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46| 分类: Easy UI|举报|字号 订阅 可以使用$.parser.pa ...
- 从客户端中检测到有潜在危险的 Request.Form 值的问题的解决方法。
在controller控制器里面添加[ValidateInput(false)] [ValidateInput(false)] public ActionResult m ...
随机推荐
- Math、Random、System、BigInteger、Date、DateFormat、Calendar类,正则表达式_DAY14
1:Math&大数据类四则运算 X abs(X x) double random() 产生随机数 double ceil(double a) 向上取整 double flo ...
- Intellij IDEA 编译等级与源代码等级不一致问题
错误:Error:java: javacTask: source release 1.7 requires target release 1.7 原因:生成class字节码的java版本,低于了源代码 ...
- 【原创】Jquery初体验二
快速导航 一.传统方式生成Table 二.使用jquery.tmpl插件快速生成Table 三.Jquery中的操作class的几个方法 四:jq里面的克隆 五:属性过滤器 六:表单元素过滤器 一.传 ...
- 页面打印pdf格式文件
'<td><button type="button" class="btn btn-primary" data-loading-text=&q ...
- WPF实现在电脑重启或关机时执行某些逻辑
Application类的SessionEnding事件,就是电脑关机或重启时响应的(会话结束事件), 所以只需要在App.xaml中添加SessionEnding <Application x ...
- 揭开Future的神秘面纱——任务取消
系列目录: 揭开Future的神秘面纱——任务取消 揭开Future的神秘面纱——任务执行 揭开Future的神秘面纱——结果获取 使用案例 在之前写过的一篇随笔中已经提到了Future的应用场景和特 ...
- Quartz2D绘制路径
// 在画线的时候,方法的内部默认创建一个path.它把路径都放到了path里面去. // 1.创建路径 cgmutablepathref 调用该方法相当于创建了一个路径,这个路径用来保存绘图信息. ...
- Spring基础(8) : properties配置文件
<context:property-placeholder location="p.properties"/> <bean id="p" cl ...
- Android studio删除工程项目
本新手最近学Android都是用的eclipse.其实个人觉得eclipse不错,可能接触Android不久,倒也不觉得它慢还是怎样.对于Google的Android studio也是早有耳闻,前两天 ...
- WPF备忘录(4)打个勾画个叉娱乐下
<Path Grid.Column="2" Data="M43,5 L20,40 20,40 0,20 6,15 18,26 37,7 43,5 z" F ...