css - 为什么溢出 :hidden on an inline-block make the following text a little bit lower?

Question

这个问题在这里已经有了答案:





display:inline-block and overflow:hidden leading to different vertical alignment

(3 个回答)



Why is this inline-block element pushed downward?

(8 个回答)


去年关闭。




如果我设置 display: inline-block在 <span/> ，没有明显的差异，这很好。但是当我进一步设置 overflow: hidden ，下面的文字有点低。这是为什么？
我根本看不到边距/填充。
附注。我想要完成的是制作 text-overflow: ellipsis发生，这需要 max-width ，这又需要 inline-block .

.s1 {
  display: inline-block;
  overflow: hidden; /* this makes the following text a bit lower, why? */
}

<span class='s1'>Hello</span> world (why am I a litter lower than "Hello"?)

Answer 1

指定 overflow除了 visible creates a new block formatting context ，它不再有基线，所以它不能与周围的基线对齐。
您可以使用 vertical-align: bottom 修复对齐方式:

.s1 {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

<span class='s1'>Hello</span> world (why am I a litter lower than "Hello"?)