Vaadin中如何实现TextField标签文本换行显示？

你可以通过两种方式实现标签文本换行，同时保持TextField的60px宽度：

方法一：自定义CSS样式 #

给TextField添加自定义类名，然后通过CSS强制标签换行：

TextField pubYear = new TextField("Publishing Year");
pubYear.setWidth("60px");
// 添加自定义类名
pubYear.addClassName("wrap-label");

在项目的全局样式文件（比如styles.css）中添加以下样式：

.wrap-label .vaadin-text-field-label {
    white-space: normal; /* 允许文本换行 */
    overflow: visible; /* 取消溢出隐藏 */
    text-overflow: unset; /* 移除省略号 */
}

方法二：使用独立Label组件 #

如果不想写CSS，可以单独用Label作为字段标签，和TextField组合布局，利用垂直空间自动换行：

// 创建独立标签，设置和TextField相同的宽度，文本会自动换行
Label pubYearLabel = new Label("Publishing Year");
pubYearLabel.setWidth("60px");

TextField pubYear = new TextField();
pubYear.setWidth("60px");

// 用垂直布局组合标签和字段，保持紧凑布局
VerticalLayout fieldContainer = new VerticalLayout(pubYearLabel, pubYear);
fieldContainer.setSpacing(false);
fieldContainer.setPadding(false);

两种方法都能满足你的需求：保持TextField的窄宽度，同时让长标签利用垂直空间换行显示完整内容。

内容的提问来源于stack exchange，提问作者Gary Greenberg