一.问题产生的原因

  当我们为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. Hadoop和Apache Spark的异同

    谈到大数据,相信大家对Hadoop和Apache Spark这两个名字并不陌生.但我们往往对它们的理解只是提留在字面上,并没有对它们进行深入的思考,下面不妨跟我一块看下它们究竟有什么异同. 1.解决问 ...

  2. Storm中的定时任务

    1.全局定时器 import java.util.Map; import backtype.storm.Config; import backtype.storm.Constants; import ...

  3. TensorFlow.js之安装与核心概念

    TensorFlow.js是通过WebGL加速.基于浏览器的机器学习js框架.通过tensorflow.js,我们可以在浏览器中开发机器学习.运行现有的模型或者重新训练现有的模型. 一.安装     ...

  4. CentOS 部署 Python3 的一些注意事项

    环境:centos6.7https://github.com/vinta/awesome-pythonhttps://github.com/PyMySQL/PyMySQLhttps://github. ...

  5. 用分布式缓存提升ASP.NET Core性能

    得益于纯净.轻量化并且跨平台支持的特性,ASP.NET Core作为热门Web应用开发框架,其高性能传输和负载均衡的支持已广受青睐.实际上,10-20台Web服务器还是轻松驾驭的.有了多服务器负载的支 ...

  6. Android _关于fragment切换重新加载的解决分享给大家

    在项目中需要进行Fragment的切换,一直都是用replace()方法来替换Fragment但是,这样会有一个问题 ,应该很多朋友都遇到过:每次切换的时候,Fragment都会重新实例化,也就是运行 ...

  7. JavaScript -- FileSystemObject-文件夹

    -----057-FileSystemObject-文件夹.html----- <!DOCTYPE html> <html> <head> <meta htt ...

  8. JavaScript -- Window-框架

    -----025-Window-框架.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&qu ...

  9. Java并发编程-synchronized指南

    在多线程程序中,同步修饰符用来控制对临界区代码的访问.其中一种方式是用synchronized关键字来保证代码的线程安全性.在Java中,synchronized修饰的代码块或方法不会被多个线程并发访 ...

  10. 大数据之presto

    1.概述 Presto是一个分布式SQL查询引擎,用于查询分布在一个或多个不同数据源中的大数据集.presto可以通过使用分布式查询,可以快速高效的完成海量数据的查询.它是完全基于内存的,所以速度非常 ...