关于网站开发中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 ...
随机推荐
- python多线程--Condition(条件对象)
Condition class threading.Condition(lock=None 这个类实现条件变量对象.条件变量允许一个或多个线程等待,知道它们被另一个线程唤醒. 如果给出了lock参数而 ...
- vue2打包时内存溢出解决方案
vue项目完成时,若项目过大,就会出现内存溢出的问题,导致vue打包不成功 错误截图 解决方案 在依赖package.json中修改build为 "build":"nod ...
- asp.net core web 添加角色管理
新建asp.net core web应用 添加RolesAdminController [Authorize(Roles = "Admin")] public class Role ...
- 使用 IntelliJ IDEA 导入 Spark 最新源码及编译 Spark 源代码(博主强烈推荐)
前言 其实啊,无论你是初学者还是具备了有一定spark编程经验,都需要对spark源码足够重视起来. 本人,肺腑之己见,想要成为大数据的大牛和顶尖专家,多结合源码和操练编程. 准备工作 1.sca ...
- Element ui tree结合Vue使用遇到的一些问题(一)
下图是一个后台管理系统,展示的是角色列表 当我点击编辑的时候,弹出一个模态框,如下图 功能需求:点击编辑按钮,弹出模态框,选择权限那块,默认选中当前角色拥有的权限. 问题:第一次点击编辑按钮时,不会选 ...
- 如何恢复windows的exe文件的默认打开方式
事情由来: 有一次在用一个播放器选择打开视频文件的时候,意外的手贱点击打来了 exe 文件,之后戏剧性的恶心开始了,首先当然是打开失败,接着整个桌面的 exe 文件全部被替换成那个播放器的图标,然后所 ...
- WebMagic之爬虫监控
访问我的博客 前言 年前闲着无聊,研究了一阵子爬虫技术,接触到爬虫框架 WebMagic,感觉很好用. 在之后的工作中,接手了新站与第三方接口对接的工作,主要的工作是去抓取对方接口的内容:初始的时候, ...
- 利用https实现站点的访问
简介 它是由Netscape开发并内置于其浏览器中,用于对数据进行压缩和解压操作,并返回网络上传送回的结果.HTTPS实际上应用了Netscape的安 全套接字层(SSL)作为HTTP应用层的子层.( ...
- ASP.NET MVC5+EF6+LayUI实战教程,通用后台管理系统框架(2)
前言 本节先给大家搭建UI部分,让大家能看到点东西,就好像所有编程书里,开始都是一个Hello World一样 开始搭建 首先建立空白解决方案,我们命名为BYCMS 然后添加新项目BYCMS 我习惯用 ...
- Docker配置阿里云加速地址
首先需要注册一个阿里云账号,只要注册账号就可以,不用充钱购买任何阿里云服务! 打开阿里云网站https://cr.console.aliyun.com,登陆自己的阿里云账号. 然后只需要在服务器配置d ...