Vaadin 中的标签文本格式（自动换行、换行）答案

【问题标题】：Label Text Formatting in Vaadin (word-wrap, line break)Vaadin 中的标签文本格式（自动换行、换行）
【发布时间】：2015-03-19 11:12:02
【问题描述】：

我正在尝试使用标签组件在 Vaadin 窗口中显示长描述文本。问题是，即使数据库中的原文是结构化的，界面中的文本格式也是单行，或者是带有段落的非结构化文本。

public Component buildDescription(){
    CssLayout descriptionLayout = new CssLayout();
    descriptionLayout.setSizeFull();
    Responsive.makeResponsive(descriptionLayout);
    descriptionLayout.addComponent(new Label("<h2>Description</h2>", ContentMode.HTML));
    descriptionLayout.addComponent(new Label(singlePatent.getDescription(), ContentMode.PREFORMATTED));
    return descriptionLayout;

}

我尝试使用所有内容模式，但没有成功，ContentMode.HTML、TEXT。内容换行以适应容器，但没有结构，就像一个长句子中断到下一行，没有格式。

在我尝试过的css中

word-break: break-word;
word-wrap: break-word;

没有成功。我附上了一些用于测试的文本。

请帮助我如何在 Vaadin 中实现正确的文本格式。

注意：我的附件在同一个question I asked on Vaadin Forum

【问题讨论】：

换行符被忽略，如果你使用ContentMode.PREFORMATTED?它可能使用了错误的字体，但它应该遵守换行符。
如果我使用 ContentMode.PREFORMATTED 那么我得到的结果是上面链接中的第一张图片（Vaadin 论坛）。默认文本字体，但没有文档结构，全部串联。
那么你的 CSS 已经有问题了，因为<pre> 会尊重换行符。像"line\nbreak" 这样的简单字符串是否也不适用于pre（毕竟可能是数据）？
不，它不起作用，但是如果我检查来自 firebug 的数据文本，我会看到格式正确的文本。

标签： css label vaadin line-breaks

【解决方案1】：

换行可以使用ElementFactory.createBr()。

示例

这段代码：

HorizontalLayout layout = new HorizontalLayout();
layout.add("Example 1");
layout.add("Example 2");

会给出这个结果：

但是这段代码：

HorizontalLayout layout = new HorizontalLayout();
layout.add("Example 1");
layout.getElement().appendChild(ElementFactory.createBr());
layout.add("Example 2");

会给出这个结果：

或者使用html br 组件：

layout.add(new Html("<br/>"));

【讨论】：