屏幕太小时，Angular Material 步进器标题消失

Posted 2023-05-07

【中文标题】屏幕太小时，Angular Material 步进器标题消失

【英文标题】：Angular Material stepper title disappears when screen is too small

【发布时间】：2020-10-18 06:32:49

【问题描述】：

我使用的是垂直步进器，它适用于计算机屏幕。但是，当使用的屏幕太小而无法一次显示所有标题时，它会被替换为...。

如何让它使用换行符而不是隐藏标题？

我正在使用的代码：

    <mat-step [completed]="true" *ngFor="let experience of experiences" state="check" >
      <ng-template matStepLabel>
        <img class="logo title-content-element vertical-align" src="experience.logoPath"/>
        <div class="spacer title-content-element vertical-align"></div>
        <div class="spacer title-content-element vertical-align"></div>
        <div class="title-content-element vertical-align">
          <h6 class="title-content-element no-margin">experience.type - experience.title</h6>
          <br />
          <span class="italic-text title-content-element">
            <span [innerhtml]="experience.dateStart.replace('/', ' / ')"></span> -
            <span [innerHTML]="experience.dateEnd.replace('/', ' / ')"></span>
            <div class="spacer"></div>
            <span class="dot"></span>
            <div class="spacer"></div>
            <span [innerHTML]="this.getDuration(experience.dateStart, experience.dateEnd)"></span>
          </span>
        </div>
      </ng-template>
      <p [innerHTML]="experience.description"></p>
    </mat-step>

它产生以下内容：

但在小屏幕上它会被截断：

我怎样才能得到回车呢？

【参考方案1】：

解决这个问题的一种方法（通过猜测您当前的 CSS）是添加一些额外的 CSS 来覆盖默认的 Angular Material mat-stepper CSS。

.mat-step-label.mat-step-label 
  text-overflow: inherit;
  white-space: normal;

足以推翻默认 CSS 并且标题上没有省略号（通过 text-overflow）。 See the difference in this StackBlitz 有两个 Material stepper 示例：

不换行到下一行 换行到下一行