一.问题产生的原因

  当我们为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语言基础(方法与数组)_DAY05

    1:函数(掌握)   (1)定义在类中,有特定功能的一段小程序,可以独立运行.    (2)函数的格式:       修饰符 返回值类型 函数名(形参类型 形式参数1,形参类型 形式参数2...)   ...

  2. C++中:默认构造函数、析构函数、拷贝构造函数和赋值函数——转

    对于一个空类,编译器默认产生4个成员函数:默认构造函数.析构函数.拷贝构造函数和赋值函数.1.构造函数:构造函数是一种特殊的类成员,是当创建一个类的时候,它被调用来对类的数据成员进行初始化和分配内存. ...

  3. JSPatch动态更新APP

    JSPatch,只需在项目中引入极小的引擎,就可以使用JavaScript调用任何Objective-C的原生接口,获得脚本语言的能力:动态更新APP,替换项目原生代码修复bug. 用途 是否有过这样 ...

  4. Android开发艺术探索学习笔记(一)

    第一章 Activity的生命周期和启动模式 1.1Activity的生命周期全面解析 1.1.1典型情况下的生命周期分析 (1)在两个Activity进行切换时,当前的Activity的onPaus ...

  5. Android 开发工具类 35_PatchUtils

    增量更新工具类[https://github.com/cundong/SmartAppUpdates] import java.io.File; import android.app.Activity ...

  6. Web Components实践开发Tab组件

    本文是对web components的一次实践,最终目的是做出一个tab组件,本文涉及Custom Elements(自定义元素).HTML Imports(HTML导入).HTML Template ...

  7. Ice简介+Qt代码示例

    1.ICE是什么? ICE是ZEROC的开源通信协议产品,它的全称是:The Internet Communications Engine,翻译为中文是互联网通信引擎,是一个面向对象的中间件,它封装并 ...

  8. 请读下面的这句绕口令:ResourceManager中的Resource Estimator框架介绍与算法剖析

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由宋超发表于云+社区专栏 本文首先介绍了Hadoop中的ResourceManager中的estimator service的框架与运行 ...

  9. 从nsq中学习如何优雅的退出go 网络程序

    退出运行中的程序,可以粗暴的kill -9 $PID,但这样会破坏业务的完整性,有可能一个正在在执行的逻辑半途而费,从而产生不正常的垃圾数据. 本文总结在go语言中,如何能优雅的退出网络应用,涉及的知 ...

  10. Spring配置文件引入xml文件: <import resource=" " />标签使用总结

    引入其他模块XML 在Spring的配置文件,有时候为了分模块的更加清晰的进行相关实体类的配置. 比如现在有一个job-timer.xml的配置 <?xml version="1.0& ...