javascript - 内联块跨度文本对齐问题

Question

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

我试图将此文本保留在一行中，但为了为部分文本设置宽度并隐藏流，我必须将跨度设置为display: inline-block这会导致对齐问题。如下图：

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>

标签： javascripthtmlcss

Answer 1

猜猜您可能希望在单词之间添加一些间距，但要解决对齐问题，您可以添加display: flex到包含 3 个文本元素的 div 中。

看起来您正在使用引导程序，因此您可以使用class="d-flex"

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

p {
    margin-top: 0;
    margin-bottom: 0;
}

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<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 class="d-flex">
      <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>