css代码:
.box {width:200pxheight:30pxline-height:30pxbackground-color:#cdd/*overflow:hidden*/ }
html代码:
<div class="box">我溢出了我溢出了我溢出了我溢出了你能把我怎么样</div>
你可以看看加了overflow:hidden和不加这句的区别
css 默认盒子样式是 content-box, 宽高设定的是内容的宽高,设置边框可能会出现溢出的问题可以通过设置 border-sizing:border-box
我更喜欢用border-box,因为border-box更灵活一点,举个例子,我在业务中遇到一个问题,我的商品详情页的一个盒子是高度自适应的,为146px,但是在ie8浏览器上显示为146.8px,如何解决,如果对盒子设置height:146px则会出现被撑高的情况,因为box-sizing默认为content-box,你给元素设置宽高,只是给元素内容设置宽高,你元素的总高度是heigtht + border + padding所以就会出现撑高,解决方法就是给当前的盒子设置box-sizing: border-box这样你设置高度为146px时,会默然将元素内容的高度进行相应减少来保证整体高度为146px,这个最大的好处就是你这个盒子有好几个,而且有不同的padding和border值,解决这个的最好的方法就是给盒子设置border-box
朋友,overflow具体如何定义溢出内容,要看你给定的值来具体处理。
overflow:visible,这个就是默认值。内容不会被修剪,会呈现在元素框之外。
overflow:hidden,这个值代表的是内容会被修剪,并且其余内容是不可见的。
overflow:scroll,这个值代表内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
overflow:auto,这个代表如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
overflow:inherit,这个代表规定应该从父元素继承 overflow 属性的值。
这些值才是overflow处理溢出内容的关键,根据需求设置不同的值即可。