JSFiddle - React, Tailwind, and code Playground

by Bacher

HTML

<div class="super">
    <span class="name">small</span><span class="ext">.exe</span>
</div>

<div class="super">
    <span class="name">medi_u_m</span><span class="ext">.exe</span>
</div>

<div class="super">
    <span class="name">l__a__r__g__e</span><span class="ext">.exe</span>
</div>

<div class="super">
    <span class="name">h______u_____g_____e</span><span class="ext">.exe</span>
</div>

CSS

.super {
    width: 100px;
    margin: 10px;
    white-space: nowrap;
    outline: 1px dotted rgba(255,0,0,.3);
    overflow: hidden
}

.name {
    display: inline-block;

    overflow: hidden;
    text-overflow: ellipsis;
}