我在Vue 3应用程序中有一个结构，我们在其中显示联系信息。首先，我们显示一个公文包图标和公司名称（如果有的话），然后我们显示一个剪影图标和联系人的姓名。这些都显示在一行中，如果总文本太长，我想省略该行中的最后一个元素，其中一个问题是用户可以搜索具有公司或联系人姓名的联系人，我们想要突出显示匹配的文本。这是通过使用v-html在匹配的文本周围添加一个来实现的。这是我在测试时使用的HTML结构（添加v-html之前）：

<div class="contacts-section">
  <div class="contact">
    <forge-icon :image-name="'BriefcaseDark'" class="partner-icon" />
    <div class="partner-text">
      Test Partner
    </div>
  </div>
  <div class="contact">
    <forge-icon :image-name="'ProfileDarkSmall'" class="contact-icon" />
    <div class="location-text">
      Testifer L. Contactson III Blah Blah Blah
    </div>
  </div>
</div>

下面是我为这个部分准备的CSS：

.contacts-section {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: 4px;
  width: 100%;
  @include text(0.875rem);
}
.contact {
  display: flex;
  flex-direction: row;
  align-items: center;
  .partner-text {
    margin-right: 16px;
    white-space: nowrap;
  }
  .location-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.partner-icon,
.contact-icon {
  margin-right: 4px;
  width: 12px;
  height: 12px;
}

到目前为止，这一切看起来完全符合我的要求，除了联系人姓名拒绝省略号，它只是忽略了overflow: hidden规则，并延伸到框架的边缘之外：

如果有人对如何让text-overflow真正工作有任何建议，我将非常感激。