时间戳

首页 > 解决方案 > mat-card-content 中的段落溢出 mat-card 容器

html - mat-card-content 中的段落溢出 mat-card 容器

问题描述

我刚开始使用角材料，但遇到了问题。我的段落会溢出卡片，但只有在文本较短时才会如此。如果我使用更大的段落，文本会很好地结束。这是我的代码

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

请注意，角度材料文档提供的长段落的顶部如何很好地包裹文本，但我添加的较短字符串却没有。 我希望它无论如何都可以包装。

请注意，角度材料文档提供的带有长段落的顶部卡片如何很好地包裹文本，但我添加的较短字符串却没有。我希望它无论如何都可以包装。

标签： htmlangularangular-material

解决方案

用来CSS实现

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

工作stackblitz示例：https ://stackblitz.com/edit/angular-zwqlyk?file=src/app/card-fancy-example.html

推荐阅读