如何用 mat-line-end 解决角材料答案

【问题标题】：how to solve angular material with mat-line-end如何用 mat-line-end 解决角材料
【发布时间】：2018-06-02 10:02:46
【问题描述】：

谁能解释为什么会发生这种情况？当我使用这个命令时

<mat-list>
<mat-list-item>
  <img matListAvatar>
  <mat-divider></mat-divider>
  <p mat-line-end class="abu">Andika Ristian</p>
  <p mat-line class="abu">My Name Is</p>
   <img mat-line-end src="assets/imgs/panah.png">
</mat-list-item>
</mat-list>

结果会是这样

但是如果我使用与上面相同的字体使用这样的命令。

<mat-list>
<mat-list-item>
  <img matListAvatar>
  <mat-divider></mat-divider>
  <p mat-line-end class="abu">Andika </p>
  <p mat-line-end class="abu">Ristian&nbsp;</p>
  <p mat-line class="abu">My Name Is</p>
   <img mat-line-end src="assets/imgs/panah.png">
</mat-list-item>
</mat-list>

结果会是这样

我希望得到第二张图片的结果，但我认为如果我使用第二个命令，这不是解决此问题的解决方案。此外，我尝试使文本对齐是正确的。结果会是这样

如上图，文字与另一行不同。谢谢之前

【问题讨论】：

标签： angular5 angular-material-5

【解决方案1】：

只要增加你名字的宽度。

.abu {
    width: 150px;
}

【讨论】：