在Vaadin 13中,我有一个网格,其中80%的内容没有填充单元格,因此Vaadin 13智能地截断单元格并添加椭圆以指示该字段被截断。
但是,有没有任何方法可以使椭圆出现在文本的左侧部分,因此用户始终可以看到单元格的“后缀/结尾”部分而不是单元格字段的开头?
(如果您对我们为什么需要它感到好奇:单元格包含各种文件的“完整路径”信息,但在90%的情况下,文件路径的开头部分始终相同,例如“C:/ Windows / system32 /文件夹1 /文件夹2“等。但后缀往往是唯一的,所以我们宁愿显示后缀。)
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");
这是最终的结果:
[