В угловых при печати слишком длинный текст перезаписывает текст и не переходит на следующую строку

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

Попробуйте вставить этот CSS в ваш код Scss.

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

Answer 2

Похоже, ваша проблема связана с использованием line-height: 0;.Установив его на ноль, вы говорите браузеру писать новые строки без какого-либо расстояния между предыдущими.Следовательно, вы видите, как новые строки появляются поверх предыдущих.

Есть несколько изящных «хаков», которые вы можете сделать с обнулением высоты строки.Хотя в этой ситуации кажется, что это может быть причиной вашей конкретной проблемы.

Я надеюсь, что этот маленький кодекс поможет объяснить, что происходит:

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

Answer 3

Попробуйте использовать перенос слов и пробелы, кое-что из этого в css, попробуйте консоль, что делает работу.