如何在Vaadin Groovy Button的Caption中实现文本换行？

我之前在Vaadin项目里也踩过这个坑——默认情况下Button的caption会被强制单行显示，试了几种方法后终于找到靠谱的解决方案，给你分享三个实用思路：

方法1：使用HTML换行标签（快速简单） #

Vaadin Button支持开启HTML内容解析，直接用<br>标签就能实现换行，但一定要记得开启htmlContentAllowed属性，否则<br>会被当成普通文本输出：

def multiLineBtn = new Button("第一行文本<br>第二行文本<br>第三行文本")
multiLineBtn.setHtmlContentAllowed(true)

⚠️ 注意：如果你的caption包含用户输入的内容，不要用这个方法，避免XSS攻击风险。

方法2：CSS控制换行（安全且灵活） #

如果不想用HTML，也可以通过CSS的white-space属性来保留换行符。先在caption里用\n换行，然后给Button添加自定义样式：

Groovy代码 #

def multiLineBtn = new Button("第一行文本\n第二行文本\n第三行文本")
multiLineBtn.addStyleName("multi-line-button")

对应的CSS样式（可放到项目全局样式文件中） #

.multi-line-button .v-button-caption {
    white-space: pre-wrap; /* 保留换行符，同时自动换行过长内容 */
    text-align: center; /* 可选：让多行文本居中对齐 */
}

你也可以根据需求换用white-space: pre-line（会合并连续空格，但保留换行），效果略有不同。

方法3：自定义Button内容（复杂排版需求） #

如果需要更精细的排版（比如不同行用不同字体、颜色），可以直接替换Button的内容为一个布局，比如VerticalLayout：

// 构建多行文本的布局
def buttonContent = new VerticalLayout(
    new Label("标题行").with {
        addStyleName("bold-text") // 自定义样式
        it
    },
    new Label("描述行1"),
    new Label("描述行2")
)
buttonContent.setSpacing(false) // 取消行间距，更像按钮文本
buttonContent.setAlignItems(Alignment.CENTER) // 文本居中

// 创建按钮并设置自定义内容
def customBtn = new Button()
customBtn.setContent(buttonContent)

这种方式完全摆脱了caption的限制，想怎么排版就怎么排，而且按钮的点击交互不受影响。

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