In Vaadin 13, how can I have ellipses appear on the left of a grid cell instead of right?

Question

In Vaadin 13, I have a grid in which 80% of the content does NOT fill in the cell, so Vaadin 13 intelligently truncates the cell and adds ellipses to indicate that the field is truncated.

However, is there any way in which the ellipse can appear on the LEFT part of the text, so the user can always see the "suffix/ending" portion of the cell rather than the beginning of the cell field?

(In case you're curious as to why we need this: the cell contains the "full path" information for various files, but in 90% of the cases, the beginning part of the filepath is always identical, eg "C:/Windows/system32/folder 1/folder 2" etc. But the suffix tends to be unique, so we'd rather show the suffix.)

Answer 1

direction: rtl; should address the problem, as suggested here : I need an overflow to truncate from the left, with ellipses

It seems to work fine with my example:

Styles under shared-styles.html:

<dom-module id="my-grid-theme" theme-for="vaadin-grid">
    <template>
        <style>

            [part~="cell"].truncateLeft {
                background: rgb(245, 245, 255);
                direction: rtl;
            }

        </style>
    </template>
</dom-module>

This is a column definition:

grid.addColumn(string->"Loooooooooooooooooooooooong test").setHeader("column 6").setWidth("45px").setClassNameGenerator(item->"truncateLeft");

And this is the final result:

[