CSS 中文件名的智能截断

Question

我正在尝试对表示文件名的文本进行自定义截断，该文件名始终显示文件扩展名，但如果空间不足，则隐藏部分名称。例如，文件名是testtesttest.xml. 如果没有足够的空间，我希望它显示类似的内容tes...xml

我一直在玩text-overflow: ellipsis，但没有得到任何结果。它要么截断整行，要么根本不截断。

export default function FilenameTruncate(props) {
    const [name, extension] = props.filename.split('.')
    return (
        <div className="filename-container">
            <div className="filename-text">
                <span>{name}</span>
            </div>
            <div className="filename-ext">
                <span>.{extension}</span>
            </div>
        </div>
    )
}

.filename-container {
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.filename-text {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.filename-ext {
    white-space: nowrap;
}

Answer 1

您需要添加一个overflow属性和一个widthor max-width：

.filename-container {
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.filename-text {
    text-overflow: ellipsis;
    max-width: 3em;
    white-space: nowrap; 
    overflow: hidden;
}

.filename-ext {
    white-space: nowrap;
}

<div class="filename-container">
    <div class="filename-text">
        <span>longfilename</span>
    </div>
    <div class="filename-ext">
        <span>.ext</span>
    </div>
</div>