css中设置了宽度,div内容溢出不换行的的原因和解决方法

时间: 2018-08-06阅读: 2890标签: 宽高

问题产生的原因  

当我们为div标签声明了宽度,但是仍然会出现文本越界的情况,不知道大家有没有发现,只有文本内容为单词或者纯数字的时候才会出现这种情况。原因是由于:浏览器在解析我们页面的时候,给这一串数字当成一个词了,这样就不会自动切断字符串而进行换行。


解决方法 

需要使用css中的word-wrap属性,目前所有主流浏览器都支持 word-wrap 属性。

方法一:

div{ 
   word-wrap: break-word; 
   word-break: normal; 
}


方法二:

div{
   word-break:break-all;
}

相比较于上面的方法,这种方法的好处在于假如在宽度的范围内的临界区存在一个完整的单词,它会保留一个完整的单词自动换行 。



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/984

css如何实现保持div等高宽比?

那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。下面以高宽 2:1 为例,通过2种方式来实现这种效果。

通过js代码来改变div的宽度

当做网页图片的切换时,有的做法是将两个div并排在一起,但是只能显示一个div的宽度,当要切换图片时将一个div的宽度从一个宽度值改为0,就实现了简单的图片替换了。 首先,我们将要更改宽度的div摆上来

理解css中min-width和max-width,width与它们之间的区别联系

css中,min-width是用来限制元素的最小宽度,max-width用来限制元素的最大宽度,也就是说当元素的width大于max-width,或者小于min-width。就被它们的值所代替,尤其适用于网站的自适应。下面将具体介绍下关于min-,max-的区别和联系

JavaScript如何获取网页的宽高,以及如何兼容(各种坑详解)

很多场景下会需要获取当前网页的宽高来达到一些效果,但是获取网页的宽高这里面还是有一点坑的,这里我进行了总结和详解

js动态获取浏览器或页面等容器的宽高

首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些,有时候我们写了100%高度的时候,然后因为是当前页面的子页面,100%的只是父页面,而子页面有下拉条还有内容的话,一些东西就不能都获取到。

js获取浏览器/界面宽高的问题_以及兼容性实现方案

js获取浏览器/界面宽高的问题:clientHeight和clientWidth获取可视区域大小,scrollHeight和scrollWidth获取网页内容高度和宽度。offsetHeight和offsetWidth,获取网页内容高度和宽度(可视区域包括滚动条等边线,会随窗口的显示大小改变)

css中input与button在一行高度不一致的解决方法

在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,很明显的看出高度不一样。这是由于button在高度计算上始终使用了Quirks模式。

JS中的offset

一、offsetWidth与offsetHeight:获取的是元素的实际宽高 = width + border + padding ,二:offsetLeft与offsetTop;offsetLeft:获取自己左外边框与父级元素的左内边框的距离 ,offsetTop:获取自己上外边框与父级元素的上内边框的距离

使用js如何设置、获取盒模型的宽和高

使用内联样式的元素的宽和高。浏览器渲染以后的元素的宽和高,无论是用何种方式引入的css样式都可以,但只有IE浏览器支持这种写法。计算一个元素的绝对位置(相对于视窗左上角)

网页中的各种上下左右宽高值

offset只读属性。width/height——显示出来的屏幕尺寸,top/left——相对于定位父元素的绝对位置.client只读属性。width/height——不带边框的offset,也不包含滚动条宽度top/left——内边距的外边缘与边框外边缘的距离,通常是边框宽度

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!