Angular 2 材料：显示列表项的全文

Answer 1

md-list md-list-item [md-line]

具有CSS属性：

    text-overflow: ellipsis
    white-space: wrap

这会截断任何不适合容器的额外文本。如果文本无法放入容器中，它仅显示省略号 (...)。

要么让你的容器更大，要么用

white-space: normal

覆盖，这会将任何额外的文本包装到额外的行上

Answer 2

<p md-line class="wrap">
  <span> {{message.content}} </span>
</p>

添加一个类并覆盖 md-line 样式。

md-list md-list-item [md-line].wrap {white-space: normal}

检查元素以查看现有样式，当前样式将大部分可见，如下所示。使用上面给出的覆盖样式来覆盖样式。

.mat-list .mat-list-item .mat-line, .mat-nav-list .mat-list-item .mat-line { styles }

Answer 3

.mat-list-base .mat-list-item .mat-line {
  white-space: normal !important;
}

.mat-list-base .mat-list-item .mat-list-item-content,
.mat-list-base .mat-list-option .mat-list-item-content {
  padding: 16px !important;
}

.mat-list-base .mat-list-item.mat-3-line,
.mat-list-base .mat-list-option.mat-3-line {
  height: auto !important;
}

Answer 4

在 Angular 18 中，可以实现以下功能：

<mat-list-item>
    <mat-icon matListItemIcon>home</mat-icon>
    <div matListItemTitle>The lazy dog jumped over the quick brown fox</div>
</mat-list-item>

连同这个CSS：

.mat-mdc-list-item-title {
  white-space: normal;
}