Text overflow with ellipsis on the left [duplicate] - html

Question

This question already has answers here:
Text-overflow ellipsis on left side
(10 answers)
Closed 7 years ago.
Consider this html/css snippet:
.l { text-align: left; }
.r { text-align: right; }
p {
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: solid 1px green;
}
<p class="l">111222333444555666777888999</p>
<p class="r">111222333444555666777888999</p>
It shows two fixed-width containers with some text too long to fit, with overflow set to show an ellipsis to show that some text is hidden. The first container is left justified, the second is right justified.
The result shows that the ellipsis is on the right for both examples.
However, for the second right justified one, I'd like to achieve this:
...4555666777888999
instead of
1112223334445556...
Is this possible?

Answer 1

You can set the direction of text from right to left using css direction property direction: rtl:
.l {
text-align: left;
direction: rtl;
}
.r {
text-align: right;
}
p {
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: solid 1px green;
}
<p class="l">111222333444555666777888999</p>
<p class="r">111222333444555666777888999</p>
direction
Set the direction CSS property to match the direction of the text: rtl
for languages written from right-to-left (like Hebrew or Arabic) text
and ltr for other scripts. This is typically done as part of the
document (e.g., using the dir attribute in HTML) rather than through
direct use of CSS.
References
MDN direction

Answer 2

To get this effect you have to use a little hack. See the following example:
p {
border:1px solid #000;
width:150px;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.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;
}
<p class="ellipsis reverse-ellipsis">
<span>111222333444555666777888999</span>
</p>
<p class="ellipsis">111222333444555666777888999</p>
More information about this you can find here: http://hugogiraudel.com/2014/12/16/css-riddle-reverse-ellipsis/