角垫扩展面板，文本太长，不适合答案

【问题标题】：Angular mat-expansion-panel, text is to long and won't fit角垫扩展面板，文本太长，不适合
【发布时间】：2019-07-31 20:12:12
【问题描述】：

我正在尝试使用 angular 的 mat-expansion-panel，我已经让它工作了，但不知何故它没有正确显示。
展开面板展开时显示的文本未正确显示。一切都打印在一行中，文本本身不适合扩展面板。

我的组件.ts

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."
      }
    ];
  }

.html

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

.css

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

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

【问题讨论】：

根据需要在mat-expansion-panel 中使用white-space: normal 或word-break: break-word
对于这么简单的 css 事情很难找到正确的答案。我很抱歉问你，谢谢你帮助我。它奏效了。

标签： css angular

【解决方案1】：

您应该将{{theme.themeDescription}} 包装在p 标记中。

.html

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

.css

.myClass {
    width: 80%;
}

【讨论】：