Javascript 内联块跨文本对齐问题

这里真的很难对齐一些文本

我试图将此文本保持在一行中，但为了设置部分文本的宽度并隐藏溢出，我必须将跨度设置为“显示：内联块”，这会导致对齐问题。如下图所示：

css

.banner {
    top: 65px;
    width: 100vw;
    position: absolute;
    z-index: 99;
}

.description {
    width: 60vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display:inline-block;
}

html

<div class="banner alert alert-danger alert-dismissible fade show" role="alert" *ngIf="show">
  <a href="#" class="alert-link">4H Incident In Production</a>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close" (click)="dismiss()">
    <span aria-hidden="true">&times;</span>
  </button>
  <ng-container *ngFor="let incident of incidents">
    <div>
      <b>{{incident.number}}</b>
      <span class="description">{{incident.description}}</span>
      <a href="#" class="alert-link">Click Here For More Information</a>
    </div>
  </ng-container>
</div>

&时代；
{{事件编号}
{{incident.description}}

我猜您可能希望在单词之间添加一些空格，但为了解决对齐问题，您可以将

display:flex

添加到包含3个文本元素的div中

看起来您正在使用引导，因此可以使用

class=“d-flex”

.banner{
顶部：65px；
宽度：100vw；
位置：绝对位置；
z指数：99；
}
p{
边际上限：0；
页边距底部：0；
}
.说明{
宽度：60vw；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
显示：内联块；
}

&时代；
{{事件编号}
{{incident.description}}

我想您正在寻找

垂直对齐

（在描述类中）

---

事件描述是否需要是一个跨度？我会把事件编号和描述都用一个p标签包装起来，以至少确保相同的页边等。美丽、简单、优雅

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;