Проблема с направлением: rtl Свойство CSS

Question

У меня есть элемент HTML, и мне нужно отобразить путь к папке/файлу внутри него, который иногда может быть очень длинным.

Я также хочу сохранить его на одной строке (в контейнере с ограничением ширины), поэтому я, очевидно, должен добавить к нему несколько многоточие.

Другим требованием является то, что я должен всегда видеть самые узкие папки в этом пути (это полезно, когда путь длинный, потому что последние узлы - это то, что вас действительно интересует).

Проблема в том, что этого довольно сложно достичь, если я использую свойство CSS direction: rtl;, потому что оно перемещает другие символы вокруг, например / или даже paranthesis.

Взгляните на этот пример: https://jsfiddle.net/r897duu9/1/ (как вы можете видеть, я не использовал text-overflow: ellipsis свойство, как это будет, по какой-то причине, переопределить direction: rtl свойство).

То, что я пытался до сих пор, и она работает на современных браузерах добавляет свойство unicode-bidi: plaintext; CSS, но в соответствии с Mozilla Developer Network это является экспериментальным и не очень хорошо поддерживается через не очень современных кашля IE браузеров. Сценарий для этого здесь: https://jsfiddle.net/n05b3jgt/1/.

Кто-нибудь знает лучший способ достичь этого, который будет хорошо поддерживаться в широком диапазоне браузеров?

Answer 1

Вы можете использовать направление на контейнере, а затем сбросить его по тексту.

.container { 
 
    width: 340px; 
 
    background:gray; 
 
    direction:rtl; 
 
    overflow:hidden; 
 
    text-align:left; 
 
    position:relative; 
 
} 
 
.container:before{ 
 
    position: absolute; 
 
    content: '...'; 
 
    background: white; 
 
    left: 0; 
 
} 
 

 
.text-with-path { 
 
    display:inline-block; 
 
    white-space:nowrap; 
 
    text-indent:1em; 
 
    direction:ltr;

<div class="container"> 
 
    <div class="text-with-path"> 
 
    /Root/someFolder/SomeAnotherFolder/AgainSomeotherFolder/MyPictures/MyDocs (recent) 
 
    </div> 
 
</div> 
 
<hr/> 
 
<div class="container"> 
 
    <div class="text-with-path"> 
 
    /MyPictures/MyDocs (recent) 
 
    </div> 
 
</div>

или просто использовать поплавок, если ваш главный вопрос, каким образом текст перетекает

.container { 
 
    width: 340px; 
 
    background:gray; 
 
    overflow:hidden; 
 
    position:relative; 
 
} 
 
.container:before{ 
 
    position: absolute; 
 
    background:gray; 
 
    content: '...'; 
 
    left: 0; 
 
} 
 

 
.text-with-path { 
 
    float:right; 
 
    margin-left:-999px; 
 
    }

<div class="container"> 
 
    <div class="text-with-path"> 
 
    /Root/someFolder/SomeAnotherFolder/AgainSomeotherFolder/MyPictures/MyDocs (recent) 
 
    </div> 
 
</div>