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

Question

我有以下代码：

    <md-list dense>
  <md-list-item *ngFor="let message of chatMessages | async">
    <p md-line>
      <span> {{message.content}} </span>
    </p>
  </md-list-item>
</md-list>

输出这个：

  

我的留言是......

而不是：

  

我的消息是很酷的消息

使用<md-list>时，如何显示每个 md列表项的所有文字？

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

进行内联样式设计。即：

<p matLine  style="white-space: normal;">
   <span> Lorem ipsum dolor sit amet</span>
</p>

Answer 4

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