CSS世界|overflow 剪裁界线border box

一个设置了 overflow:hidden 声明的元素，假设同时存在 border 属性和 padding 属性，类似于下面的 CSS 代码：

// HTML
<div class="box">
    <img src="1.jpg" width="256" height="192">
</div>

// CSS
.box {
  width: 200px;
  height: 80px;
  padding: 10px;
  border: 10px solid;
  overflow: hidden;
}

则当子元素内容超出容器宽度高度限制的时候，剪裁的边界是 border box 的内边缘，而非 padding box 的内边缘。

例子可手戳 -> https://demo.cssworld.cn/6/4-1.php

如果想实现元素剪裁同时四周留有间隙的效果的话，可以试试使用透明边框，此时内间距 padding 属性是无能为力。

探讨一个 overflow 属性的一个很经典不兼容的问题

如果容器可滚动(假设是垂直滚动),则 padding-bottom 也算在滚动尺寸之内， IE 和 Firefox 浏览器忽略 padding-bottom. 而 Chrome 浏览器则会渲染出来。

对于这样的不兼容，我们在实际项目开发中尽量避免滚动容器设置 padding-bottom 的值，除了样式不一样之外，还会导致 scrollHeight 值不一样。

了解 overflow-x 和 overflow-y

overflow-x 和 overflow-y 分别表示单独控制水平或垂直方向上的剪裁规则。

支持的属性和 overflow 属性一模一样

• visible： 默认值
• hidden： 剪裁
• scroll： 滚动条区域一直在
• auto： 不足以滚动时没有滚动条，可以滚动时滚动条出现

误区

认为只要 overflow-x 和 overflow-y 设置了上面的属性值，就一定会是这样的表现。

so～实际彩蛋

overflow-x 和 overflow-y 的属性值都是 visible，否则 visible 会当 auto 来解析。换句话说，永远不可能实现一个方向溢出剪裁或滚动，另一方向内容溢出显示的效果。

html {
  overflow-x: hidden;
  overflow-y: auto;  /*多余*/
}

但是，scroll，auto 和 hidden 这3个属性值是可以共存的。

CSS文本溢出显示省略号

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap