I need an overflow to truncate from the left, with ellipses

Question

Briefly, I have a field where the rightmost digits are most significant. (Naturally, this field comes from our affiliates' systems, based on their primary keys, so the left most digits only change once per epoch!)

Everyone knows CSS provides a RIGHT truncation with "text-overflow: ellipsis;". How (without adding code to the server to prepare that field via string-surgery) do we truncate the field on the LEFT, and put the "..." elipses on the LEFT?

(CSS3 is okay.)

Related: http://stackoverflow.com/questions/9793473/text-overflow-ellipsis-on-left-side — Ray Toal, Oct 06 '12 at 16:38
I added a fiddle to show the problem and propose a very hackish solution: http://jsfiddle.net/ryanwheale/2cyVX/ — Ryan Wheale, Oct 06 '12 at 17:43
this kind of edge case is the reason why the Firefox devs refused to implement ellipsis until FFv7, despite getting so much flak for it. They did implement it in the end, but the spec has a lot of holes around the edges. If you're doing anything much more than the basic ... at the end of a box, you'll find issues with it. — Spudley, Oct 06 '12 at 17:51
See for a CSS only solution my answer over at http://stackoverflow.com/a/34057911/3318612. — mbaer3000, Dec 03 '15 at 04:36

score 27 · Accepted Answer · edited Sep 02 '22 at 12:30

27

Try to use this trick:

.ellipsis {
    overflow: hidden;
    width: 60px;
    direction: rtl; 
    margin-left: 15px;
    white-space: nowrap;
}
    
.ellipsis:after {
    position: absolute;
    left: 0px;
    content: "...";
}

<p class="ellipsis">ert3452654546</p>

edited Sep 02 '22 at 12:30

Andy

4,783
2
26
51

answered Oct 06 '12 at 17:54

khomyakoshka

1,259
8
18

1

The parent element to the `:after` element needs to have `position:relative` or `absolute`. Or else you get this: http://jsfiddle.net/ekLpfy08/ – Matthias Apr 20 '15 at 20:25
1

No need of `after` pseudo-element. You can add `text-overflow: ellipsis` instead of the `::after`. The dots will appear on the left, because the `direction` is `rtl`. – kakaja May 31 '17 at 08:43
1

Just to note, if you are having issues with your string being mixed letters and non-letter characters (for example, you are trying to truncate `**** **** **** 1234` so you can still see the `1234` but RTL makes it appear at the start of the string and still get truncated), add `:before { content: '\\200E' }` to make the *element* RTL but the *content* LTR again. (Or add `&ltr;` to the start of your content in the HTML.) – Rawling Oct 02 '18 at 07:39

score 12 · Answer 2 · edited Mar 28 '17 at 20:15

12

I am unable to test it now, but I am pretty certain that adding

direction: rtl;

will do the expected result.

edited Mar 28 '17 at 20:15

Dorian

22,759
8
120
116

answered Oct 06 '12 at 16:58

Tchoupi

14,560
5
37
71

2

It does indeed put the ellipsis on the left, however, there seems to be a bug in Chrome where the ellipsis are simply prepended to the text, but you are still seeing the left edge (beginning) of the text instead of the end. See fiddle: http://jsfiddle.net/ryanwheale/2cyVX/ – Ryan Wheale Oct 06 '12 at 17:42
@RyanWheale, now happening in IE... But not in Chrome anymore AFAIK – Aritz Oct 10 '16 at 14:18
beware: a coworker recently found that this solution breaks if the text in your span starts with a slash, for example. this should NOT be considered a reliable solution. – Chris Calo Jun 17 '22 at 18:48

score 0 · Answer 3 · answered Feb 14 '18 at 13:21

You can use a css class to have this kind of behavior like:

.responsive-text {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  direction: rtl;
  width: 100%;
}

You only have to define the size of the container of this text and every time that the text inside doesn't fill in only one line, it's going to truncate the text and adds ... at the beginning.

Yohan Dahmani · Answer 4 · 2021-04-07T13:07:05.470

0

As I was using the direction: rtl; workaroud, beware that writing something like 1 > 2 > 3 will result in being displayed as 3 < 2 < 1 !

The solution is to add &ltr; before your text in your HTML, if you use angular you have to add &#x200E before your text in your HTML.

edited Apr 07 '21 at 13:07

answered Apr 07 '21 at 12:41

Yohan Dahmani

1,670
21
33

This answer is confusing. It sounds like you're warning users that using `direction: rtl` will... cause the text to be written right-to-left? That's exactly what the property is designed to do. This also seems like it's more appropriate as a comment under Tchoupi's answer rather than as an answer itself. – TylerH Apr 07 '21 at 13:41
@TylerH But the people are using positionning to align text to the left ... so you couldn't see the difference until you use numbers instead of string ! – Yohan Dahmani Apr 08 '21 at 07:44
While this does indeed work, it causes the overflowing text to be aligned to the right even when applying `text-align: left` Verified in both Chrome and Firefox. – Amit Beckenstein Jun 24 '21 at 13:40

I need an overflow to truncate from the left, with ellipses

4 Answers4

Linked

Related