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

Question

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

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

结果会是这样

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

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

Answer 1

只是增加你的名字的宽度。

.abu {
    width: 150px;
}