角度材质5 - 在垫子列表中显示全文(自动换行)

Kay*_*Kay 7 angular-material angular

我正在创建一个聊天框,每条消息都是一个角度材料垫列表.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>
Run Code Online (Sandbox Code Playgroud)

我如何强制它显示全文

moh*_*rim 21

使用以下css:

::ng-deep .mat-list .mat-list-item .mat-line{
     word-wrap: break-word;
    white-space: pre-wrap;
}
Run Code Online (Sandbox Code Playgroud)

要么

::ng-deep .mat-line{
  word-wrap: break-word !important;
  white-space: pre-wrap !important;
}
Run Code Online (Sandbox Code Playgroud)

mat-list-item的高度限制为48px,因此我们需要覆盖大文本的情况

::ng-deep  .mat-list .mat-list-item{
  height:initial!important;
}
Run Code Online (Sandbox Code Playgroud)

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

链接以了解有关自动换行和白色空间的更多信息

  • 在哪个元素上? (2认同)
  • &lt;div matLine style="word-wrap:break-word;white-space:pre-wrap;"&gt; (2认同)

Jos*_*ell 6

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

<mat-list-item>
  <p>
    My super long text..........
  </p>
</mat-list-item>
Run Code Online (Sandbox Code Playgroud)


Joh*_*uez 5

我创建了这个 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;
    }
Run Code Online (Sandbox Code Playgroud)

或者

    /* SCSS */
    .mat-list-item.mat-list-item-word-wrap {
      height: initial !important;
      .mat-line {
        word-wrap: break-word !important; 
        white-space: pre-wrap !important;
      }
    }
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

请参阅此处的示例:https ://stackblitz.com/edit/angular-6mhz2x