CODEWITHSUNDEEP
htmlangularangular-material
Joeman
Joeman

Reputation: 251

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

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.

Upvotes: 0

Views: 1384

Answers (1)

Msk Satheesh
Msk Satheesh

Reputation: 1536

Use CSS to achieve

CSS FILE

.mat-card-content{
  word-wrap: break-word;
}

TS File

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'card-fancy-example',
  templateUrl: 'card-fancy-example.html',
  styleUrls: ['card-fancy-example.css'],
  encapsulation: ViewEncapsulation.None
})
export class CardFancyExample {}

Working stackblitz example: https://stackblitz.com/edit/angular-zwqlyk?file=src/app/card-fancy-example.html

Upvotes: 1

Related Questions