Css 在右侧显示省略号并将文本向右对齐

我把

方向：rtl以相反的顺序显示，但我希望截断右侧的额外文本，而不是左侧


。文件上载状态{
边框：1px实心#ccc；
空白：nowrap；
溢出：隐藏；
方向：rtl；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

*
C:\fakepath\996571_139880286046752_2094565473_n.jpg
使用文本对齐：右而不是方向：rtl

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


 .file-upload-status {
     text-align:right;
    border: 1px solid #ccc;
    white-space: nowrap;
    overflow: hidden;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}
.star{
float:right;
}


*
C:\fakepath\996571_139880286046752_2094565473_n.jpg
.文件上载状态{
文本对齐：右对齐；
边框：1px实心#ccc；
空白：nowrap；
溢出：隐藏；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.明星{
浮动：对；
}

Fiddle:
删除方向：rtl并在下面添加解决了我的问题

.file-upload-status {
   border: 1px solid #ccc;
   white-space: nowrap;
   overflow: hidden; 
   display : flex; 
   flex-direction : row-reverse; 
   align-items: flex-start;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

}
您需要如何输出？C:\fakepath\996571_1398802860346752*可能的重复解决了问题，但不想使用float：对；不适用。。。。这将保留结尾处的3个点。。。不在左边