2

I am using a vertical stepper and it works fine for computer screens. However, when using a screen that is too small to display all of the title at once, it gets replaced with ....

How can I get it to use line breaks rather that hide the title?

The code I am using:

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

It yields the following :

big screen normal display

But on small screens it gets truncated:

enter image description here

How can I rather get a carriage return?

Roy
  • 7,811
  • 4
  • 24
  • 47
Matthieu Raynaud de Fitte
  • 2,001
  • 3
  • 25
  • 49

2 Answers2

2

One way to solve this (by guessing your current CSS), is to add some extra CSS to override the default Angular Material mat-stepper CSS.

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

will be enough to overrule the default CSS and to not have ellipsis on your titles (via text-overflow). See the difference in this StackBlitz that has two examples of the Material stepper:

  1. Not wrapping to next line
  2. Wrapping to next line
Roy
  • 7,811
  • 4
  • 24
  • 47
0

I had to change it since now you cannot style it directly, had to add ::ng-deep. This allows you to "punch through" and style things that are outside your view to edit. Here is a good article about it. https://blog.angular-university.io/angular-host-context/

:host is added to limit it to only change it in this context and not globally.

:host ::ng-deep .mat-step-text-label {
  text-overflow: inherit;
  white-space: normal;
}
Andres
  • 198
  • 7