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

whatsns 发布于2019-04-23 13:30 / 3197人阅读

摘要：二解决方法例如宽，它的内容就会到自动换行相比较于上面的方法，这种方法的好处在于假如在宽度的范围内的临界区存在一个完整的单词，它会保留一个完整的单词自动换行下面让我们来测试一下这样我们就可以看见字母自动换行了

一.问题产生的原因

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

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

　　②当文本内容为汉字：

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

二.解决方法

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

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

　　下面让我们来测试一下

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

GPU云服务器云服务器 js中设置编码 asp中设置隐藏 js中设置选中数据 asp中设置背景图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1974.html

[总结]CSS/CSS3常用样式与web移动端资源

摘要：不允许负值用百分比来定义缩放比例。解决这个很简单，在父元素中使用即可解决该。列宽度由单元格内容设定。定义仅有大写字母。不过，要让任何元素生效还得借助于一点点。 css/css3常用样式 CSS修改选中文字的颜色 html代码：第一段文字选中效果第二段文字选中效果 css代码： .p1::selection{background:red;color:#fff;} .p2::selec...

The question 2019-08-28 17:54 评论0 收藏0
前端复习笔记

摘要：一基本结构设置字符编码集格式网页头部二文本标记加粗倾斜下划线删除线上标下标三引用样式表的方式内联样式在元素的开始标签里，设置一个属性，并设置对应的属性名及属性值例使用场景里，使用给元素添加样式内部样式表在标签里加上一对标签，并且在标签设置对一、基本结构 //设置字符编码集格式 // //网页头部二、文本标记1.加粗 b2...

yhaolpz 2019-04-23 11:46 评论0 收藏0
html+css 核心知识总结

摘要：空元素，主要讲下可算内联元素，因为可与其他元素同行，且宽高对其起作用。提示对内联元素宽高起作用，请使用谈谈对定位的理解生成绝对定位的元素，相对于定位以外的第一个父元素进行定位。 Html 1.解释，主要从utf-8展开，utf-8是一种字符编码，该编码是全世界通用的，意思是假如项目涉及多语言，那么只能使用该编码方式。是使用html5文档类型。告知浏览器的解析器，用什么文档类型 ...

jindong 2019-08-29 15:14 评论0 收藏0
html+css 核心知识总结

摘要：空元素，主要讲下可算内联元素，因为可与其他元素同行，且宽高对其起作用。提示对内联元素宽高起作用，请使用谈谈对定位的理解生成绝对定位的元素，相对于定位以外的第一个父元素进行定位。 Html 1.解释，主要从utf-8展开，utf-8是一种字符编码，该编码是全世界通用的，意思是假如项目涉及多语言，那么只能使用该编码方式。是使用html5文档类型。告知浏览器的解析器，用什么文档类型 ...

szysky 2019-08-02 10:19 评论0 收藏0
关于响应式布局，你必须要知道的

摘要：本文主要介绍一些响应式布局容易忽略但又很重要的知识点。单位不仅仅可以用来设置字号，还可以设置任何盒模型的属性，比如有一点优势就是可以和媒体查询配合，实现响应式布局运用场景如果我们做的页面只在移动端访问，这是因为不兼容低版本的浏览器。一、前言响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。...

Eirunye 2019-08-02 11:56 评论0 收藏1