<br> не применяется в заголовке mat-extension-panel-header

Question

На рисунке показано, как разрыв не применяется

<mat-expansion-panel>
   <mat-expansion-panel-header [collapsedHeight]="'70px'">
      <mat-panel-title>
         <span class="Text">Room 03</span><br>
        <span class="link" style="opacity:0.7">A/C</span>
      </mat-panel-title>
      <mat-panel-description>
        <span class="link" style="opacity:0.7">Beds Available</span><br>
        <span class="Text">2/4</span><br>
      </mat-panel-description>
   </mat-expansion-panel-header>
</mat-expansion-panel>

В этом коде тег
не применяется.пожалуйста, проверьте изображение в начале вопроса.Я хочу, чтобы A / C и 2/4 перешли на следующую строку.

Answer 1

Удалите все теги <br> и добавьте это в CSS-файл своих компонентов:

mat-panel-title,
mat-panel-description,
span {
  display: block;
}

Здесь - рабочий блик стека.