在 Vaadin 13 中，如何让椭圆出现在网格单元的左侧而不是右侧？

【问题标题】：In Vaadin 13, how can I have ellipses appear on the left of a grid cell instead of right?在 Vaadin 13 中，如何让椭圆出现在网格单元的左侧而不是右侧？
【发布时间】：2019-04-10 13:25:33
【问题描述】：

在 Vaadin 13 中，我有一个网格，其中 80% 的内容没有填充到单元格中，因此 Vaadin 13 智能地截断单元格并添加省略号以指示该字段被截断。

但是，有没有什么方法可以让椭圆出现在文本的左侧，以便用户始终可以看到单元格的“后缀/结尾”部分，而不是单元格字段的开头？

（如果您对我们为什么需要这个感到好奇：单元格包含各种文件的“完整路径”信息，但在 90% 的情况下，文件路径的开头部分始终相同，例如“ C:/Windows/system32/folder 1/folder 2" 等。但后缀往往是唯一的，所以我们宁愿显示后缀。）

【问题讨论】：

标签： vaadin vaadin-flow vaadin12

【解决方案1】：

direction: rtl; 应该解决这个问题，如下所示：I need an overflow to truncate from the left, with ellipses

我的例子似乎很好用：

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>

这是一个列定义：

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

这是最终的结果：

[

【讨论】：