0
4

1 回答 1

2

我没有使用 v10，但我假设与下面基于 v8 的方法类似，应该可以得到相同的效果。需要注意的一点是，与许多其他内容一样，它取决于您使用的浏览器，对于 IE 和 Edge（链接 1指向链接2 ），您需要将输入设为只读才能使其工作，因此我的示例中的焦点/模糊侦听器。如果您愿意，您可以进一步设置输入样式，使其在禁用时看起来像普通输入，但这不是这里的重点。

代码

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;
}

结果

用省略号输入

于 2018-07-17T16:15:16.023 回答