当 TextField 中的文本未完全显示时附加省略号，Vaadin 8 和 10答案

【问题标题】：Append ellipsis when text in a TextField is not completely displayed, Vaadin 8 & 10当 TextField 中的文本未完全显示时附加省略号，Vaadin 8 和 10
【发布时间】：2018-12-23 10:13:31
【问题描述】：

当 TextField 无法显示其内容的所有文本时，我希望省略号 (… HORIZONTAL ELLIPSIS) 作为显示的最后一个字符出现，以向用户表明某些字段内容不可见.实际上，任何类型的指标都是可以接受的，省略号或其他。

➛ Vaadin 8 (Framework) 或 10 (Flow) 中是否有这样的功能？

➛ 是否有一些解决方法或修改我可以做到这一点？一些CSS 的把戏？

【问题讨论】：

标签： vaadin8 vaadin10 vaadin-flow

【解决方案1】：

我没有使用 v10，但我认为与下面基于 v8 的方法类似，应该可以得到相同的效果。需要注意的一点是，就像很多其他东西一样，您正在使用 depends on the browser，而对于 IE 和 Edge（link1 指向 link2），您需要将输入设为只读才能拥有它工作，因此我的示例中的焦点/模糊侦听器。如果您愿意，您可以进一步设置输入样式，使其在禁用时看起来像常规输入，但这不是这里的重点。

代码

import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;

public class MyEllipsisTextFieldComponent extends VerticalLayout {
    public MyEllipsisTextFieldComponent() {
        TextField ellipsisTextField = new TextField("Ellipsis", "This is a text field with a custom style that uses ellipsis to display very long and uninteresting texts like this one");
        ellipsisTextField.addStyleName("ellipsis");
        ellipsisTextField.addFocusListener(event -> ellipsisTextField.setReadOnly(false));
        ellipsisTextField.addBlurListener(event -> ellipsisTextField.setReadOnly(true));
        ellipsisTextField.setReadOnly(true);
        addComponent(ellipsisTextField);

        addComponent(new TextField("No ellipsis", "This is a regular text field with a very long and uninteresting text that does not use ellipsis"));
    }
}

主题

.v-textfield-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
}

结果

【讨论】：