I have implemented a file input feature that displays the selected file's name in a column.
However, when the file name is too long, it expands vertically which causes readability issues. There is an option to force the text to expand horizontally, but if the width of the column is fixed, the complete filename does not appear and is truncated with three dots (...).
<div class="card bg-light mb-3" style="width:40%; height:500px; overflow-y:scroll">
<div class="card-header">Attachment</div>
<div class="card-body att">
<input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
<div *ngFor="let url of items">
<div class="row attach">
<div class="col">
{{url.fileType}}
</div>
<div class="col">
{{url.filename}}
</div>
</div>
</div>
</div>
</div>
Attempts Made:
white-space: nowrap;
This helped to expand the text horizontally, however, it caused alignment issues with the extension or within the column.