Text ellipsis at start of string with CSS? - html

Question

Getting this effect with CSS it's easy:
This is a very long para...
We just just use text-overflow:ellipsis.
However the reverse
... is a very long paragraph.
seems less obvious.
I have read this comprehensive article but the solution give there is still less than ideal.
Here's the CSS to implement it
.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;
}
The main problem with it is its length and the fact that the ellipsis looks a bit off.
Does anyone know of a shorter solution that keeps the ellipsis in line?

Answer 1

As per this documentation its possible now🤓. I have added an working example below.
{
direction: rtl;
text-overflow: ellipsis;
}
div {
margin: 5px;
background: #ccc;
padding: 10px;
width: 500px;
}
.box {
line-height: 50px;
border: 1px solid #000;
overflow: hidden;
white-space: nowrap;
font-family: sans-serif;
padding: 0 0.5em;
text-align: left;
}
.el-normal {
text-overflow: ellipsis;
}
.el-reverse {
direction: rtl;
text-overflow: ellipsis;
}
<div>
<h3>Normal</h3>
<p class="box el-normal">
Getting this effect with CSS it's easy: This is a very long para We just just use text-overflow:ellipsis. However the reverse is a very long paragraph. seems less obvious.
</p>
<h3>Reverse</h3>
<p class="box el-reverse">
Getting this effect with CSS it's easy: This is a very long para We just just use text-overflow:ellipsis. However the reverse is a very long paragraph. seems less obvious.
</p>
</div>