Angular Material 5 - 在垫子列表中显示全文（自动换行）答案

【问题标题】：Angular Material 5 - Show full text in Mat Lists ( Word Wrap )Angular Material 5 - 在垫子列表中显示全文（自动换行）
【发布时间】：2017-11-19 13:01:22
【问题描述】：

我正在创建一个聊天框，每条消息都是一个角度材料垫列表。 https://material.angular.io/components/list/overview.

但是，如果消息真的很长，而不是增加高度并进入下一行，它会剪切消息并显示一个椭圆。如下图所示。

 <mat-list dense>     
    <mat-list-item class="chat-message-body" *ngIf="auth._id !== message.author._id" fxLayoutAlign="" dir="ltl">
        <div matLine>
            <b>{{message.author.profile.username}} </b>
            <span>{{message.created_at | date:'shortTime'}} </span>
        </div>
        <span matLine> {{message.body}} </span>
        <img matListAvatar class="img-box" src="http://via.placeholder.com/30x30" alt="...">
    </mat-list-item>
</mat-list>

如何强制显示全文

【问题讨论】：

如果要显示大文本元素，请改用卡片
卡片会在它周围添加阴影边框等，对我来说似乎需要做更多的工作来移除东西。使用列表有什么问题？列表似乎更适合聊天框而不是卡片

标签： angular angular-material

【解决方案1】：

使用以下css：

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

或

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

mat-list-item 的高度限制为 48px，所以我们需要在大文本的情况下覆盖

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

演示：https://plnkr.co/edit/tTlhYgTkSz1QcgqjCfqh?p=preview

Link 了解更多关于 word-wrap 和 white-spac

【讨论】：

在哪个元素上？
尝试覆盖现有的 css 类但不能直接设置样式属性
@KHAN 更新了答案，覆盖了 .mat-line 类
plnkr.co/edit/R1SyWGoDClRefsW59XKn?p=preview 死机不好用

【解决方案2】：

只需使用 <p> 标签将整个段落包裹在 <mat-list-item> 内，这将强制使用正确的样式。有道理...在这种情况下不需要样式。

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

【讨论】：

【解决方案3】：

我创建了这个 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;
    }

或

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

html:

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

在此处查看示例：https://stackblitz.com/edit/angular-6mhz2x

【讨论】：

【解决方案4】：

如果阅读这篇文章的任何人想要包装密集垫列表<mat-list dense>，请将[dense] 添加到mohit uprim's 以上答案：

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

【讨论】：

【解决方案5】：

您好，您尝试过使用 CSS 属性 word-break 或 overflow-break 吗？

【讨论】：