paragraph inside mat-card-content is overflowing mat-card container

Posted on by

I just started working with angular material but I have encountered a problem. My paragraph overflows the card but only when there is shorter text. If I use a bigger paragraph the text wraps up nice. this is the code I have

  <mat-card *ngFor="let s of services">
    <mat-card-header>
      <mat-card-title> {{ s.title }} </mat-card-title>
      <mat-card-subtitle> ${{ s.price }} </mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image [src]="s.img" alt="" />
    <mat-card-content>
      <p>{{ s.description }}</p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-stroked-button color="accent">Learn more</button>
    </mat-card-actions>
  </mat-card>

Notice how the top one with the long paragraph provided by the angular material docs wraps the text just fine but the shorter string I added doesn't. I would like it to just wrap no matter what.

Notice how the top card with the long paragraph provided by the angular material docs wraps the text just fine but the shorter string I added doesn’t. I would like it to just wrap no matter what.

Source: Angular Material Quesions