JSFiddle - React, Tailwind, and code Playground

HTML

<span class="file-upload-status" style="max-width:200px">
      C:\fakepath\996571_1398802860346752_2094565473_n.jpg</span>

<br/>
<span class="file-upload-status" style="max-width:200px">
       C:\fakepath\1.jpg</span>

CSS

.file-upload-status {
        font-weight: bold;
        font-size: 16px;
        color: #888;
        background: #fff;
        border-radius: 7px;
        height: 27px;
        border: 1px solid #ccc;
        padding-left: 5px;
        padding-right: 5px;
        white-space: nowrap;
        overflow: hidden;
        direction: rtl;
        display:inline-block;
        width: 200px;
        position: relative;
    }
    .file-upload-status:after {
        content:".................................";
        color: white;
        position: relative;
        background-color: white;
        z-index: 2;
    }
    .file-upload-status:before {
        content:"...";
        position:absolute;
        background-color: white;
        left: 0px;
        top: 0px;
        z-index: 1;
    }