css - 在右侧显示省略号并将文本右对齐

Question

我将 direction:rtl; 以相反的顺序显示，但我想截断右侧的额外文本，而不是左侧。

   .file-upload-status {
    border: 1px solid #ccc;
    white-space: nowrap;
    overflow: hidden;
    direction: rtl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

有人可以帮我解决这个问题吗？

Answer 1

删除 direction: rtl 并添加 below 解决了我的问题

.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;