Can someone please assist with a coding issue I'm experiencing in 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>
The data in variable data.healthRecco2 is lengthy and due to this, it doesn't word wrap properly on the webpage as it rewrites on the same line.
I have included the relevant code snippet from the .scss file below:
.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;
}
}
If anyone has suggestions on how to resolve this issue and get the text to wrap correctly onto the next line, your assistance would be greatly appreciated.