I am dealing with incoming json data that is being displayed in table cells. Some of these cells contain "reserved white space" which I am able to display and highlight using various CSS properties such as pre/pre-wrap and background-color. However, a problem arises when there are excessive white spaces in certain cells, causing them to overflow out of the table. I have tried setting the width and max-width of the parent tag but it doesn't solve the issue. I have also searched for solutions on breaking strings containing spaces with pre-wrap, but they do not work if there are only white spaces without other characters. Is there any workaround for this? (I am working with angular 10.)
Here's what I'm attempting to achieve:
<tr
mdbTableCol
*ngFor="let item of attr.elements; let k = index"
>
<ng-container>
<td class="small_column_width">
<div>
<span [ngClass]="{
classA: item.status === 'A',
classB: item.status === 'B'
}">
{{ item.value }}
</span>
</div>
</td>
</ng-container>
</tr>
Sometimes, the value of item.value consists of multiple white spaces, which can be up to 250 characters long. In such cases, displaying these values may cause the table to overflow entirely. Is there a way to effectively break the string or restrict its width?
Component.css:
.classA {
background-color: #4caf50 !important;
color: whitesmoke;
max-width: 50px !important;
white-space: pre-wrap;
word-break: break-all;
}
.classB {
background-color: #ffbf00 !important;
max-width: 50px !important;
white-space: pre-wrap;
word-break: break-all;
}