I am encountering an issue with my flex box and its span element.
My goal is to truncate the text when it overflows, hiding the overflow without displaying ellipsis.
<div fxFlexFill fxLayoutAlign="center center" class="over-line">
<div fxFlex="0 0 60%" fxLayoutAlign="center center">
<div class="truncate" fxLayoutAlign="start center">{{ mytext }}</div>
</div>
</div>
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
After researching, I discovered that adding min-width:0 was suggested as a solution, however, it did not resolve the issue.
Upon further investigation, it was mentioned that using a span element might be causing the problem. I switched to a div element, but the outcome remained the same.
Where could the source of my problem lie?