Текстовое многоточие в начале строки с помощью CSS? ⇐ CSS

[Anonymous]

Получить этот эффект с помощью CSS легко:


Это очень длинный параграф...


Мы просто используем text-overflow:ellipsis.

Однако наоборот


... очень длинный абзац.


кажется менее очевидным.

Я прочитал эту подробную статью, но предлагаемое там решение все еще далеко не идеально.

Вот CSS для реализации

Код: Выделить всё

.reverse-ellipsis {
text-overflow: clip;
position: relative;
background-color: white;
}

.reverse-ellipsis:before {
content: '\02026';
position: absolute;
z-index: 1;
left: -1em;
background-color: inherit;
padding-left: 1em;
margin-left: 0.5em;
}

.reverse-ellipsis span {
min-width: 100%;
position: relative;
display: inline-block;
float: right;
overflow: visible;
background-color: inherit;
text-indent: 0.5em;
}

.reverse-ellipsis span:before {
content: '';
position: absolute;
display: inline-block;
width: 1em;
height: 1em;
background-color: inherit;
z-index: 200;
left: -.5em;
}

Основная проблема — его длина и тот факт, что многоточие выглядит немного не так.

Да кто-нибудь знает более короткое решение, позволяющее сохранить многоточие на одной линии?

Подробнее здесь: https://stackoverflow.com/questions/279 ... g-with-css