<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; */
}

按以上程式碼最後得到的顯示效果是，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, 那麼他的基線就是其下邊距邊緣，
否則的話，就是其內部最後一個內聯元素的基線（文字就是內聯元素咯。。）

如下所示：

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

所以，設定了vertical-align: top之後，改變了其預設對齊方式，所以就對齊咯。

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

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