設置text-overflow文本溢出隱藏時的對齊問題

設置text-overflow: ellipsis后引起的文本對齊問題

最近在做網頁的時候用到了文本溢出隱藏的功能，但是出現了一些小問題，下面先放上示例代碼吧。

<p>
  <span class="left">Hello Hello Hello</span>
  <span class="right">xhaha</span>
</p>

p{
  width: 40%;
  margin: 20px auto;
  font-size: 50px;
}
span{
  display: inline-block;
}
.left{
  width:40%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.right{
  /* overflow: hidden; */
}

查看DEMO

按以上代碼最后得到的顯示效果是，span.left和span.right沒有對齊。右邊的會沉下去點，這個在demo里面可以看到。

然后我就想這是什么原因造成的，在調試器里勾選掉.left的overflow: hidden后，就顯示正常了（當然，省略號兒也沒了），然后我就捉摸着這是不是BFC的問題，因為平時自己清除浮動什么的，都喜歡用overflow:hidden來觸發BFC，以便包裹元素的來着。當然了，給.right設置overflow: hidden或者float: right之后，也確實會顯示正常（float: right會讓文字右浮動，不過對齊的效果確實是達到了)，之后我就在BFC的問題上糾結了好久，因為MDN上說了，inline-block元素本身就是會觸發BFC的，那么前面所說的和BFC有關，就不那么准確了。

后來在stackoverflow上得到了答案，對span加上一個vertical-align: top然后就會對齊了。

至於原因，是因為inline-block元素默認的對齊方式是基線對齊，那么基線是什么呢？　
如果一個inline-block盒子是空的，或者說他的overflow屬性不為visible, 那么他的基線就是其下邊距邊緣，
否則的話，就是其內部最后一個內聯元素的基線（文字就是內聯元素咯。。）

如下所示：

The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

那么，span.left的基線就是那個背景色的最下邊，而右邊span.right的基線，就是字符x的底部，基線對齊的意思，就是這兩條線是在同一水平線上的，所以，右邊的元素為了對齊，就要往下沉咯。現在我們目測的話，也是這兩條線貌似也確實是在一條水平線上的。

所以，設置了vertical-align: top之后，改變了其默認對齊方式，所以就對齊咯。

然后使用右浮動之后，因為浮動會使盒子的display屬性變為block，所以就不是inline-block元素，自然就不會受到前面的規則的影響了。

之后是使用overflow: hidden，這個屬性使得inline-block元素的基線發生了改變，變得和左邊元素一樣，所以也能對齊。

最后來個小總結吧： 好的文章一定要多讀幾遍，每一遍都會有所收獲。

參見：
stackoverflow- inline-block元素垂直對齊問題
張鑫旭-CSS深入理解vertical-align和line-height的基友關系