Показать многоточие справа и выровнять текст справа - PullRequest
Новая
       16

Показать многоточие справа и выровнять текст справа

0 голосов
/ 23 октября 2018

Я положил 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>

Может кто-нибудь помочь мне в этом?

Ответы [ 2 ]

0 голосов
/ 25 октября 2018

удаление направления: 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;

}

0 голосов
/ 23 октября 2018

Используется выравнивание текста: вправо вместо направления: 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/

...