2

垂直ステッパーを使用していますが、コンピューターの画面では問題なく動作します。ただし、小さすぎてすべてのタイトルを一度に表示できない画面を使用している場合は、 に置き換えられ...ます。

タイトルを隠すのではなく、改行を使用するにはどうすればよいですか?

私が使用しているコード:

    <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>

次の結果が得られます。

大画面通常表示

ただし、小さな画面では切り捨てられます。

ここに画像の説明を入力

どうすればキャリッジリターンを取得できますか?

4

1 に答える 1

2

これを解決する 1 つの方法 (現在の CSS を推測することによる) は、追加の CSS を追加して、デフォルトの Angular Material mat-stepperCSS をオーバーライドすることです。

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

デフォルトの CSS を上書きし、タイトルに省略記号を付けないようにするのに十分です ( 経由text-overflow)。マテリアル ステッパーの 2 つの例を含むこの StackBlitz の違いを参照してください。

  1. 次の行に折り返さない
  2. 次の行に折り返す
于 2020-06-27T21:58:11.220 に答える