Добавлять многоточие, когда текст в TextField отображается не полностью, Vaadin 8 & 10

Question

Когда TextField не могу отобразить весь текст его содержимого, я хотел бы многоточие (… ГОРИЗОНТАЛЬНЫЙ ЭЛЛИПСИС), который должен отображаться как последний отображаемый символ, чтобы указать пользователю, что часть содержимого поля не видна. На самом деле, любой тип индикатора будет приемлемым, многоточным или другим.

Such Есть ли такая функция в Vaadin 8 ( Framework) или 10 ( Flow)?

➛ Есть ли какое-нибудь решение или модификация, которую я могу сделать, чтобы сделать это? Какой-то трюк CSS?

Answer 1

Я не использую v10, но я предполагаю, что аналогичный подход, как приведенный ниже, основанный на v8, должен дать вам тот же эффект. Следует отметить, что, как и множество других вещей, это зависит от браузера, который вы используете, и для 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;
}

Результат