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

问题描述

问 题

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>

解决方案

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 内部的计算也始终保持跟外部一样，所以内部的基线恰好跟外部一样。

这篇关于css - 关于overflow的问题。设置之后，不晓得为什么，左右的文字掉下来了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！