如何创建 Vaadin 多行按钮

How to create Vaadin multiline buttons


我遇到了一个问题，我想使用 Vaadin 8 为 Vaadin 按钮设置多行文本。 但是网上并没有找到完整的例子，所以如果有人遇到同样的问题，我想在这里提供一个。

实际上，您也可以在常规 Vaadin 按钮中使用多行标题。

有两种方法

  1. 使用button.setCaptionAsHtml(true) 并使用<BR> 换行符。
  2. 设置按钮的最终宽度，并使用 CSS
    3. 启用自动换行

在这两种情况下，您还需要为按钮设置 "height: auto" 和 CSS，否则按钮内不会出现线条。

例如

Button button = new Button("Multiple lines in a button");
button.addStyleName("multiline-button");

并在您的主题混合中

.multiline-button {
   width: 125px;
   white-space: normal;
   height: auto;
}

结果