Блог

Действительно трудно выровнять какой-то текст.

Я пытаюсь сохранить этот текст в одной строке, но для того, чтобы задать ширину для части текста и скрыть поток, мне пришлось установить интервал для отображения: 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">amp;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>
  

Думаю, вы, вероятно, захотите добавить некоторый интервал между словами, но чтобы просто исправить проблему с выравниванием, вы можете добавить display: flex в div, содержащий 3 текстовых элемента.

Похоже, вы используете bootstrap, поэтому вы можете использовать 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">amp;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>  

Я думаю, вы ищете vertical-align (в классе описания)

 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;
  

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align