Vaadin 23中Paragraph组件内换行实现方案咨询

方法1：利用CSS空白样式保留换行符 #

Vaadin的Paragraph默认会将换行符(\n)折叠为空格，通过设置white-space: pre-wrap样式，可让换行符生效，同时文本会自动换行适应容器宽度。

内联样式实现 #

Paragraph paragraph = new Paragraph();
paragraph.getStyle().set("white-space", "pre-wrap");
paragraph.setText("p01\np02\np03\np04");

自定义CSS类实现（推荐） #

先在全局样式文件（如styles.css）中定义类：

.multi-line-paragraph {
    white-space: pre-wrap;
}

再在Java代码中引用：

Paragraph paragraph = new Paragraph("p01\np02\np03\np04");
paragraph.addClassName("multi-line-paragraph");

方法2：在Paragraph内嵌套Text与Br组件 #

无需依赖CSS，直接通过组件组合实现换行，还能为不同文本段单独设置样式：

Paragraph paragraph = new Paragraph();
paragraph.add(
    new Text("p01"), new Br(),
    new Text("p02"), new Br(),
    new Text("p03"), new Br(),
    new Text("p04")
);

方法3：使用Html组件直接渲染HTML换行 #

若需直接使用<br>标签，可借助Vaadin的Html组件：

Html multiLineHtml = new Html("<p>p01<br>p02<br>p03<br>p04</p>");
// 将组件添加到Article中
article.add(multiLineHtml);

注意：若文本包含用户输入，需先进行XSS转义，避免安全风险。

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