Show ellipsis on right side and align text to right

Question

I put direction:rtl; to show in reverse order, but I want to truncate extra text at right side, but not left side.

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

Can someone help me on this?

Possible duplicate of [Needs use right "text-overflow" when "direction" is set to "rtl"](https://stackoverflow.com/questions/18532256/needs-use-right-text-overflow-when-direction-is-set-to-rtl) — Gerard, Oct 23 '18 at 06:56

score 3 · Accepted Answer · answered Oct 25 '18 at 06:34

removing direction: rtl and adding below solves my problem

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

}

score 1 · Answer 2 · answered Oct 23 '18 at 07:05

1

Used text-align:right instead of direction: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;
}

Fiddle: https://jsfiddle.net/mnevrs02/

answered Oct 23 '18 at 07:05

DPS

943
11
22

solved the issue, but wanted to not use float:right; – satish kumar V Oct 25 '18 at 06:36
not applicable.... this keeps the 3 dots at the end... not at the left – Martin Zvarík Mar 28 '21 at 18:02

Show ellipsis on right side and align text to right

2 Answers2