一.问题产生的原因

　　当我们为div标签声明了宽度，但是仍然会出现文本越界的情况，不知道大家有没有发现，只有文本内容为单词或者纯数字的时候才会出现这种情况为此我特意测试了两种情况，结果如下：

　　①当文本内容为纯数字或者字母：

　　②当文本内容为汉字：

　　　　所以我们可以得出结论：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。

二.解决方法

　　①word-wrap:break-word 　　　　(例如div宽200px，它的内容就会到200px自动换行）

　　②word-break:break-all　　　　    (相比较于上面的方法，这种方法的好处在于假如在宽度的范围内的临界区存在一个完整的单词，它会保留一个完整的单词自动换行）

　　下面让我们来测试一下

　　这样我们就可以看见字母自动换行了！！！

关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法的更多相关文章

  1. asp.Net2.0中TextBox设置只读后后台获取不到值的解决方法

    http://www.cnblogs.com/yxyht/archive/2013/03/02/2939883.html   ASP.NET中TextBox控件设置ReadOnly="tru ...

  2. .NET中TextBox控件设置ReadOnly=true后台取不到值的解决方法

    在.NET 2.0 下,当页面上的某个TextBox 设置了属性ReadOnly="True"时,通过客户端脚本给其赋值后,在后台代码中访问其Text属性却无法获得该值.经过尝试, ...

  3. UIView 设置alpha后, 子view也随着变化alpha, 解决方法

    //        _closeContainerBar.alpha = 0.7; _closeContainerBar.backgroundColor = [[UIColor blackColor] ...

  4. HTML中Meta标签中http-equiv属性小结

    HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...

  5. HTML中Meta标签中http-equiv属性

    HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...

  6. 关于django中input标签中file类型以及开路由

    0825自我总结 关于django中input标签中file类型 1.input提交图片实时展示 <img src="/static/img/default.png" wid ...

  7. odoo开发笔记 -- div标签代替odoo button写法

    odoo开发笔记 -- div标签代替odoo button写法 并调用自定义js <footer> <div id="confirm_request_cloud_repo ...

  8. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  9. 从客户端中检测到有潜在危险的 Request.Form 值的问题的解决方法。

    在controller控制器里面添加[ValidateInput(false)]         [ValidateInput(false)]        public ActionResult m ...

随机推荐

  1. Java操作word文档使用JACOB和POI操作word,Excel,PPT需要的jar包

    可参考文档: http://wibiline.iteye.com/blog/1725492 下载jar包 http://download.csdn.net/download/javashixiaofe ...

  2. Ubuntu 16.04 服务器上配置使用 Docker

    Docker基础概念 在使用Docker之前,我们先了解下几个Docker的核心概念 Docker Daemon Docker引擎,就是运行在后台的一个守护进程,在我们启动它之后,我们就可以通过Doc ...

  3. 【nodejs】文件上传demo实现

    文件结构: index.js var server = require('./server.js'); var router = require('./router.js'); var request ...

  4. bower 和 npm 的区别

    前端技术和工程实践真的是突飞猛进啊,想当年,我这个半业余前端吭哧吭哧做页面的时候,哪有这么多东西可以用啊,现在先进到我都完全看不懂了.本文主要讲一下同是包管理器的bower和npm的差别. 主要也是在 ...

  5. Android开发中实现https校验

    在安卓开发中需要自己写代码实现校验公钥的功能 当然,  如果是自己服务器,就不用校验, 如果是别人的服务器,比如银行,就需要校验 在这里, 小编采用从github上下载的开源框架实现,在开源框架中添加 ...

  6. 一口一口吃掉Volley（三）

    欢迎访问我的个人博客转发请注明出处:http://www.wensibo.top/2017/02/17/一口一口吃掉Volley(三)/ 学习了一口一口吃掉Volley(二)之后,你应该已经学会了如何 ...

  7. PLSQL Developer概念学习系列之登录连接Oracle时出现（没有登录） -PL / SQL Developer：ORA - 12541： TNS ：无建听程序的错误解决办法（图文详解）

    不多说,直接上干货! 前期博客 PLSQL Developer概念学习系列之如何正确登录连接上Oracle(图文详解)   如用scott.scott_password进行登录,orcl是全局数据库 ...

  8. C#基础篇四数组

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace P01A ...

  9. elasticSearch6源码分析(3)cluster模块

    1. cluser概述 One of the main roles of the master is to decide which shards to allocate to which nodes ...

  10. android开发学习笔记系列（3）--ScrollView与HorizontalScrollView

    ScrollView与HorizontalScrollView 这是一个滚动视图,就是说如果你在你的UI中容不下那么多的内容,且你对自己的UI都已经设置好了px,OK,那么在适应屏幕过程中,我们并不希 ...