Angular 角材质5-在材质列表中显示全文（文字换行）

我正在创建一个聊天框，每条消息都是一个有角度的材质列表

但是，如果消息确实很长，而不是增加高度并转到下一行，则会剪切消息并显示椭圆。如下图所示

{{message.author.profile.username}
{{message.created_在|日期：'shortTime'}
{{message.body}

---

如何强制它显示全文

您好您是否尝试过CSS属性

分词

或

溢出分词

？

使用以下CSS：

::ng-deep .mat-list .mat-list-item .mat-line{
     word-wrap: break-word;
    white-space: pre-wrap;
}

或

mat列表项的高度限制为48px，所以我们需要在大文本的情况下重写

::ng-deep  .mat-list .mat-list-item{
  height:initial!important;
}

演示：

---

为了进一步了解wrap和white spac，我创建了这个css/scss类

    /* CSS */
    .mat-list-item.mat-list-item-word-wrap {
      height: initial !important;
    }
    .mat-list-item-word-wrap .mat-line {
      word-wrap: break-word !important; 
      white-space: pre-wrap !important;
    }

或

html:

描述
{{description}}

---

参见这里的示例：

如果有人阅读此帖子，希望包装密集垫列表

，请添加

[dense]

以回答上述问题：

：：ng deep.mat list[dense]。mat list项。mat行{
单词包装：打断单词；
空白：预包装；
}

只需用

标签将整个段落包装在
中，即可强制使用正确的样式。有道理。。。在这种情况下不需要样式

<mat-list-item>
  <p>
    My super long text..........
  </p>
</mat-list-item>



我的超长文本。。。。。。。。。。

如果你想显示大的文本元素，请使用卡片。Scard会在其周围添加阴影边框等，对我来说，似乎需要做更多的工作来删除内容。使用列表有什么问题？列表似乎更适合聊天盒而不是卡片。哪个元素？尝试覆盖现有css类，但无法直接设置样式attribute@KHAN更新了答案，覆盖了.mat行类，但效果不好
    /* CSS */
    .mat-list-item.mat-list-item-word-wrap {
      height: initial !important;
    }
    .mat-list-item-word-wrap .mat-line {
      word-wrap: break-word !important; 
      white-space: pre-wrap !important;
    }

    /* SCSS */
    .mat-list-item.mat-list-item-word-wrap {
      height: initial !important;
      .mat-line {
        word-wrap: break-word !important; 
        white-space: pre-wrap !important;
      }
    }

    <mat-list>
      <mat-list-item class="mat-list-item-word-wrap">
        <mat-icon mat-list-icon>description</mat-icon>
        <h3 mat-line>{{ description }}</h3>
      </mat-list-item>
    </mat-list>

<mat-list-item>
  <p>
    My super long text..........
  </p>
</mat-list-item>