关于overflow的问题。设置之后，不晓得为什么，左右的文字掉下来了

Question

p{
    height: 30px;
    line-height: 30px;
    border: 1px solid red;
    text-align: center;
}
.op{
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<p>
    <span>111111111</span>
    <span class="op">12222222</span>
    <span>13333333</span>
    <span>14444444</span>
</p>

Answer 1

1. inline-level box 默认沿基线对齐。

2. Line box 高度计算（见10.8）。
   你定义了 line-height 为 30px 也就是说 line box 至少 30px 高，大于字体默认的 16px，再补上上下
   half-leading (30px-16px)/2 = 7px 所以不设 .op 时看起来就是居中的效果。
   同理 .op 也是 30px 高。

3. inline-block 属于 atomic inline-level box，它的基线为最后一行 in-flow line box （看页尾），这里就是其底部。

4. 再根据 Line box 高度计算，.op 30px 加上字体的深度 D（因字体而异），line box 高度就是 30px 多一点。

5. 最后为字体补上 half-leading 整体高度就是 37px 多一点，但你设了高度 30px ，所以截了上面的 30px。

所以解决方法就明显了，让 .op vertical-align 为 top 或 bottom，这里利用了字体和 line-height 继承的特点， 所以 .op 的高度始终与其所在的 line box 一致，不会影响到基线的位置；.op 内部的计算也始终保持跟外部一样，所以内部的基线恰好跟外部一样。

Answer 2

op类中添加样式 vertical-align: bottom;

Answer 3

https://segmentfault.com/q/10...
这个问题跟你提的问题差不多，基线的问题

Answer 4

1. 对于行内元素来说，有一些单独的概念，如行框，元素框，基线，行高。需要明确的是
   行内元素的高度和行高有关系，和padding border以及margin没有关系；
   行内元素默认是基线对齐；
   行内块元素会具备块级元素的特性，也就是在计算高度的时候，和padding border以及margin有关系；
   行框的确定是由该行中所有的行内元素和行内块元素的元素框按照规定的对齐方式（默认是基线对齐）排好之后，然后从最上面的元素框到最下面的元素框之间的距离就是行框的高度，所以行高只是规定了行框的最小高度；

2. 来分析这个例子，首先我们把p元素的height属性去掉，给第二个span添加margin-bottom:10px;(为了解释行内块元素的元素框和margin有关);
   对于第一个span元素来说，默认行内元素，高度和行高有关，行高为30px，所以该元素的元素框是30px；
   对于第二个span元素来说，里面内容的高为30px，但是行内块元素的元素框是上外边界到下外边界，所以该元素的元素框是40px（30px+10px）；
   同理，第三个和第四个元素的元素框同样也是30px;

   那为什么会错位呢？
   因为默认的对齐方式是基线对齐，假设此时整行有一条黑色的线表示基线，文字会把它的基线位置（大概在文字的中下方）放在基线上；但是对于行内块元素来说，具有块元素的部分属性，但是块元素哪有基线的概念，所以这个时候就会把行内块的元素框的下边界与基线对齐；
   所以整个行框的上边界取第二个span的上外边界，下边界取第一个span（第一、三、四个span的元素框下边界位置相同）的元素框的下边界，所以导致行框的高度大于行高(30px)。

   
   给第二个span元素特意添加了margin-bottom:10px;使得效果更加明显。

3. 所以，如果不给p元素添加height属性，p由内容撑起来的高度比30px要大，添加了height之后，因为p的默认overflow属性是visible，所以内容能看见，但是当p明确设置高度之后，因为border是在height外边画边界，所以border上去了，如下：