html - 当打印太长的文本时， Angular 会覆盖文本而不是下一行

Question

所以我在html中有如下代码

<div class="equipment-utilization-chart" >
<ng-container *ngIf="data.healthRecco1 !== ''" >
      <div class="recommendations"> <p> 1. {{data.healthRecco1}}</p> </div>
      <div class="recommendations"><p> 2. {{data.healthRecco2}}</p></div>
      <div class="recommendations"><p>3. {{data.healthRecco3}}</p></div>
  </ng-container>
</div>

data.healthRecco2 中的值非常长，因此它不会自动换行，而是在同一行重写，使文本无法辨认

下面是.scss文件中的代码

.equipment-utilization-chart {
  left: rem(444);
  width: rem(682);
  height: rem(85);
  line-height: 0;

 .recommendations {
width: auto;
height: auto;
margin-top: 35px;
word-wrap : break-word;  }

我应该怎么做才能让文本自动换行到下一行。任何帮助将不胜感激。

Answer 1

您的问题似乎是由于您使用了 line-height: 0;。通过将它设置为零，您告诉浏览器在前一行之间没有任何距离的情况下编写新行。因此，您会看到新行出现在先前行的顶部。

将行高置零可以实现一些巧妙的“技巧”。在这种情况下，它似乎可能是您的特定问题的原因。

我希望这个小代码笔能帮助解释发生了什么:

https://codepen.io/ojako/pen/rZRvpW