列内的文本溢出。如何强制文本始终水平扩展并与列宽对齐

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>

Image

我尝试了什么

white-space: nowrap;

水平扩展文本，但文本与扩展或列不一致:(

Answer 1

添加这个CSS

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

列内的文本溢出。如何强制文本始终水平扩展并与列宽对齐

Text overflow inside a column. How force the text to always expand horizontally and be inline with the column width

html

css

overflow

typescript

angular