html - 设置属性“text-overflow:省略号”，然后其同级元素的文本无法与其对齐

  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”设置为“ .right”，然后将“ .right”对齐到'。剩下'。

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

最后，请不要专注于我的英语不好，我只是想找到我所遇到的问题的答案，我想我会这样解决的。谢谢！

O（∩_∩）O〜

最佳答案

只需输入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>