问题

我正在使用 Vaadin，我想为一个具有多行的按钮添加标题 - 它应该简单地显示 `String - 2 个换行 - String`，我认为这不会太难做到。

现在不幸的是，这事情比我预期的要稍微困难一些 - 我的数据结构应该显示一个时间表（所以我正在使用一个扩展了 grid 的结构），我希望所有的 Slots 都填充有相应的讲座和讲师。然而，我必须使用 Button 元素（而不是 NativeButton），所以使用 HTML 标题并不起作用。

因此，我尝试了一个像这样的 css 类：

```css
.multiline-button {
    width: 125px;
    white-space: normal !important;
    height: auto;
    word-break: break-word !important;
    word-wrap: break-word !important;
    background-color: red !important;
}

（实际上，背景颜色只是为了测试样式是否被应用）- 我还尝试通过 button.setStyle(name, value); 在代码中手动设置这些属性。不幸的是，这些属性甚至都没有被应用到按钮上。我的按钮创建代码：

@CssImport("./styles/multiline-button.css")
public class NewScheduleTimetable<T> extends TimetableWithValue<T> {

    @Override
    protected Button createSlot(int day, int timeSlot) {
        final Button slotButton = new Button();
        /* 即使拼命地尝试删除所有其他主题，甚至什么都没有改变
        slotButton.getThemeNames().forEach(theme -> {
            slotButton.removeThemeName(theme);
        }); */
        slotButton.setWidthFull();
        slotButton.setHeight("125px");
        slotButton.addClassName("multiline-button");

        // 这设置了文本
        if (hasValue(day, timeSlot)) {
            slotButton.setText(getText(getValue(day, timeSlot)));
        }
        this.recalculateColumnWidths();
        return slotButton;
    }

}

现在按钮成功创建并且也显示了它们应该有的名称 - 只是标题缺少换行。如果我在浏览器中检查元素，标题确实包含换行（换行通过 \n 进行）。

所以我对 Vaadin 还相当新，但通常这些事情只需要五分钟，而不需要我花费几天的时间来尝试不同的方法（所有这些方法都不起作用，不幸的是） - 我在这里漏掉了什么？

<details>
<summary>英文:</summary>

I am using Vaadin and I want to add a caption to a button that has multiple lines - it should simply display `String - 2 linebreaks - String` which I did not expect to be too hard to do. 

Now sadly this turns out to be a little bit harder than I expected - My DataStructure should display a timetable (so I am using a structure that extends a grid) and I want all Slots to be filled with the according lectures and lectureres. However I am bound to use the Button-Element (not the NativeButton), so using a HTML-Caption does not work.

So what I tried was a css-class like this:

    .multiline-button {
        width: 125px;
        white-space: normal !important;
        height: auto;
        word-break: break-word !important;
        word-wrap: break-word !important;
        background-color: red !important;
    }

(actually the background-color was just for testing if the style was applied) - I also tried setting these attributes manually in code via `button.setStyle(name, value);`. Sadly none of those turns out to even be applied to the button. My Button Creation Code:

    @CssImport(&quot;./styles/multiline-button.css&quot;)
    public class NewScheduleTimetable&lt;T&gt; extends TimetableWithValue&lt;T&gt; {
    
        @Override
        protected Button createSlot(int day, int timeSlot) {
            final Button slotButton = new Button();
           /* even desperately tried removing all other themes, didn&#39;t even change anything 
            slotButton.getThemeNames().forEach(theme -&gt; {
                slotButton.removeThemeName(theme);
            }); */
            slotButton.setWidthFull();
            slotButton.setHeight(&quot;125px&quot;);
            slotButton.addClassName(&quot;multiline-button&quot;);
    
            //this sets the text
            if (hasValue(day, timeSlot)) {
                slotButton.setText(getText(getValue(day, timeSlot)));
            }
            this.recalculateColumnWidths();
            return slotButton;
        }
    
    }

Now the Buttons get created successfully and also display the name they should have - they are just missing the linebreaks for the captions. If I inspect the element in my browser, the captions do contain linebreaks (linebreaks are done via `\n`).

So I am quite new to Vaadin, but usually these things are a five-minuter and not take me days to figure out different approaches (which all did not work out sadly) - what am I missing here?


</details>


# 答案1
**得分**: 2

你可以将一些HTML内容设置为图标组件，尽管该按钮似乎并非为此而设计。

```java
Button button = new Button(new Html("&lt;div&gt;第一行&lt;br /&gt;&lt;br /&gt;第二行&lt;/div&gt;"));

请注意，重要的是Html内容包含在一个元素内，就像上面的 div 一样。

这还会添加你可能希望使用 button.getThemeNames().remove("icon"); 移除的 icon 主题。

如果你改变CSS，例如：

height: auto;
padding: var(--lumo-space-s);

它应该能让你走得相当远。

height: auto;
padding: var(--lumo-space-s);