Text overflow with ellipse on the left

Question

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 displays two containers with a fixed width with some text too long to move, to show an ellipsis, to show that some text is hidden. The first container is left justified, the second is correct.

The result shows that the ellipsis is on the right for both examples.

However, for the second right justified, I would like to achieve this:

 ...4555666777888999 

instead

 1112223334445556... 

Is it possible?

Answer 1

You can set the text direction from right to left using the css direction 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 CSS property of the direction so that it matches the direction of the text: rtl for languages ​​written from right to left (for example, in Hebrew or Arabic). and ltr for other scripts. This is usually done as part (for example, using the dir attribute in HTML), and not through direct use of CSS.

References

MDN direction

Answer 2

To get this effect, you need to hack a bit. 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> 

You can find more information about this here: http://hugogiraudel.com/2014/12/16/css-riddle-reverse-ellipsis/