html - 设置属性 'text-overflow: ellipsis' 然后其兄弟元素的文本无法与其对齐

Question

  p{
    width: 300px;
    margin: 0 auto;
  }
  span{
    display: inline-block;
  }
  .left{
    width: 40%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

<p class="test">
    <span class="left">TestTestTestTest</span>    
    <span class="right">Test</span>
</p>

然后它会显示为 this , 我想之所以这样显示可能是属性 'overflow: hidden' 创建了一个 bfc，所以我设置了属性 'overflow: hidden' 或 'float : right' for '.right'，然后'.right'对齐到'.left'。

但我从 MDN 看到了 BFC 的描述，它说 display:inline-block 将创建一个 BFC，因此每个 span 标签的 BFC 应该已经创建，因为 css 规则 span {display: inline-block}，但为什么在我为“.right”设置属性之前它们没有对齐？

最后，请不要关注我糟糕的英语，我只是想找到我遇到的问题的答案，我想我会通过这种方式得到它。谢谢你!

O(∩_∩)O~

Answer 1

只需给 vertical-align: top; 即可。因为 inline-block 默认 vertical-align 是基线。

p{
    width: 300px;
    margin: 0 auto;
  }
  span{
    display: inline-block;
    vertical-align: top;
  }
  .left{
    width: 40%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

<p class="test">
    <span class="left">TestTestTestTest</span>    
    <span class="right">Test</span>
</p>