Переполнение текста внутри столбца. Как заставить текст всегда расширяться по горизонтали и выравниваться по ширине столбца

Question

Я создал файл ввода. После выбора файла его имя отображается в столбце.

Если имя файла очень длинное, оно расширяется по вертикали. Есть способ заставить текст всегда расширяться по горизонтали, но если вы заполните ширину столбца, имя не будет выглядеть полным (пример: asdasdasdasdasd .... (то есть добавляются три точки)

ДЕМО

<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>

Изображение

ЧТО я пробовал

white-space: nowrap;

расширяется текст по горизонтали, но текст не соответствует расширению или столбцу: (

Answer 1

Добавить CSS

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;