Css 角垫扩展面板，文本为长文本，赢得'；不合适

我试着从angular使用mat扩展面板，我已经让它工作了，但不知为什么它没有正确显示。
展开面板展开时显示的文本未正确显示。所有内容都打印在一行中，文本本身无法放入扩展面板中

我的组件

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

@Component({
  selector: 'app-theme-selection',
  templateUrl: './theme-selection.component.html',
  styleUrls: ['./theme-selection.component.css']
})
export class ThemeSelectionComponent implements OnInit {
  public themeList:Array<any> = null;

  constructor() { }
  ngOnInit() {
    this.themeList = [
      {
        "themeName":"Thema A",
        "themeDescription":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
      },
      {
        "themeName":"Thema B",
        "themeDescription":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
      },
      {
        "themeName":"Thema C",
        "themeDescription":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
      },
      {
        "themeName":"Thema D",
        "themeDescription":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
      },
      {
        "themeName":"Thema E",
        "themeDescription":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
      }
    ];
  }

---

基本上，我希望Lorem ipsum适合并在必要时进行换行（然后增加高度）

您应该将

{{{theme.themeDescription}}

包装在

p

标记中

.html

---

根据需要使用

mat扩展面板中的
white space:normal
或
word break:break word
，对于这样简单的css问题很难找到正确的答案。我很抱歉问你，谢谢你帮助我。成功了。
<div class="themeSelection">
        <mat-radio-group class="radioButtons">
            <mat-radio-button class ="radBtn" *ngFor="let theme of themeList" [value]="theme.themeName">
                <mat-expansion-panel>
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                            {{theme.themeName}}
                        </mat-panel-title>
                </mat-expansion-panel-header>
                            {{theme.themeDescription}}
                </mat-expansion-panel>
            </mat-radio-button>
        </mat-radio-group>
    </div>

.themeSelection {
    width: 40vw;
    height: 70vh;
     margin: auto;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
}
mat-expansion-panel {
    width: 40vw;
  }

<div class="themeSelection">
        <mat-radio-group class="radioButtons">
            <mat-radio-button class ="radBtn" *ngFor="let theme of themeList" [value]="theme.themeName">
                <mat-expansion-panel>
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                            {{theme.themeName}}
                        </mat-panel-title>
                </mat-expansion-panel-header>
                        <p class="myClass">
                            {{theme.themeDescription}}
                        </p>
                </mat-expansion-panel>
            </mat-radio-button>
        </mat-radio-group>
    </div>

.myClass {
    width: 80%;
}