CSS - ellipsis filename but keep extension

ellipsized-filenames.css

/* HTML

<div class="file">
    <div class="icon"></div>
    
    <span class="filename">
        <span class="name">
            Filename<span class="extension">.ext</span>
        </span>
    </span>
</div>

<div class="file">
    <div class="icon"></div>
    
    <span class="filename">
        <span class="name">
            Another Filename<span class="extension">.ext</span>
        </span>
    </span>
</div>

*/

/* html, body for demo purposes only */
html, body {
    padding: 0;
    margin: 0;
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
    color: grey;
}

/*
This does not have to target all elements
Only .filename, .name and .extension require border-box
*/
* {
    box-sizing: border-box;
}

.file {
    position: relative;
    width: 50%;
    height: auto;
    margin: auto;
    border: 1px solid lightgrey;
    text-align: center;
}

.icon {
    position: relative;
    margin: 10%;
    width: 80%;
    height: 0;
    padding-bottom: 80%;
    background-color: grey;
    border-radius: 50%;
}

.filename {
    position: relative;
    display: inline-block;
    margin: auto;
    white-space: nowrap;
    max-width: 100%;
}

.name {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    /* This padding must match the width set on the .extension below */
    padding-right: 28px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.extension {
    position: absolute;
    top: 0;
    right: 0;
    text-align: left;
    /*
    For better results calculate the size of the text within this element with JS
    Set this elements width style & the .name's padding-right with JS
    */
    width: 28px;
}