设置overflow:hiden行内块元素会发生偏移的现象

白瓷梅子汤
402 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

当你的页面 HTML 结构长这个样子，

<div id="box">
  <p>
    <span>这是一段超过一定长度就会显示省略号的文字</span>
    <span>看这里</span>
  </p>
</div>

你想要实现超出长度显示省略号。这个时候你上网一顿百度，写下了这么一段样式。

#box p {
  width: 800px;
  font-size: 30px;
}
#box p span {
  display: inline-block;
}
#box p span:nth-child(1) {
  max-width: 350px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

实现了吗？实现了，但又不完全实现。你发现，这个元素出现了位置偏出。

image.png

image-20220401204348774.png

image.png

一个父元素（块级元素）中有几个在同一水平线上的几个元素（行内块元素），设置其中某个元素的oveflow:hidden之后，会导致这几个行内块元素不再是同一水平线上对齐。

然后你又一通百度，发现解决方法。

image.png

  1. 设置行内块元素对齐方式: vertical-align: top/bottom;

    #box p span {
  display: inline-block;
  vertical-align: top;
}

  2. 设置行内块元素的 overflow 不为 visible;

    #box p span {
   display: inline-block;
   overflow: hidden/auto/scroll;
}

  3. 设置 flex 布局

    #box p {
   width: 800px;
   font-size: 30px;
   display: flex;
}

  4. 为行内块元素设置 float 属性

    #box p span {
   display: inline-block;
   float: left;
}

image-20220401204418620.png

原因是：行内块元素的默认对齐方式是基线对齐即（vertical-align：baseline），设置overflow不为visible之后改变了它的默认对齐方式为下边距边缘。但是其他行内块元素依然还是基线对齐就会出现下沉的视觉效果。

W3的解释：当一个行内块元素被设置overflow不为visible属性值后，其baseline将被强制修改为元素下外边沿。

默认情况下，baseline为字符x的底线位置且vertical-align属性值为baseline。

由于div包含块中只有行内级别的元素，所以将生成一个IFC（行内格式化上下文）来规定其中元素的渲染规则。根据IFC布局的规则，垂直方向上对齐遵照vertical-align属性。

为什么W3要做如此奇怪的规定呢？

这是因为 overflow 被设置为非 visible 值，将使得该 inline-block 元素中的last line box的渲染处于不确定状态（浏览器可能渲染也可能不渲染），

这让保持默认规则的baseline也处于不确定状态，那么索性就规定以确定的下外边沿来作为baseline。

参考文章：blog.csdn.net/iefreer/art…

avatar
文章
阅读
粉丝