JSFiddle - React, Tailwind, and code Playground

by anilnf

HTML

<div style="width:50%;" id="fileName">
<span style="width: 50%">This is a very lengt</span>
<span style="width: 50%">hy text. Really lengthy.</span>
</div>

CSS

#fileName span {
    white-space: nowrap;
    overflow: hidden;
    display:inline-block;
}
#fileName span:first-child {
    text-overflow: ellipsis;
    margin-right: -8px;
    padding-right: 0px;
    text-align: right;
}
#fileName span + span {
    direction:rtl;
    text-overflow: ellipsis;
    text-align: left;
}