CSS 中的文件名智能截断

Question

我正在尝试自定义截断代表文件名的文本，该文件名始终显示文件扩展名，但如果没有足够的扩展名则隐藏部分名称 space。例如，文件名为 testtesttest.xml。如果 space 不够，我希望它显示类似 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 属性和一个 width 或 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>

CSS 中的文件名智能截断

Smart truncation of filename in CSS

css

overflow