使用CSS文件为Vaadin组件Dialog设置样式解决内容展示杂乱问题

问题根因 #

Vaadin 组件默认会对纯文本内容做空白符合并处理，连续的换行、空格、制表符都会被合并为单个空格；如果接口返回的是带HTML标签的结构化字符串，Vaadin 普通文本组件默认会对标签做转义处理，不会渲染为DOM元素，最终导致排版混乱。

对应解决方案 #

场景1：接口返回带换行/空格的纯文本内容 #

给展示内容的组件添加 white-space: pre-wrap 样式即可保留原始空白格式，同时自适应容器宽度自动折行：

// Java 后端写法示例
String content = yourEndpoint.fetchPhoneInfo();
Text infoText = new Text(content);
// 保留原始排版
infoText.getStyle().set("white-space", "pre-wrap");
// 可选：追加行高、边距样式优化展示
infoText.getStyle().set("line-height", "1.6").set("padding", "0 1rem");
dialog.add(infoText);

// 前端TS写法示例
const content = await endpoint.fetchPhoneInfo();
const infoSpan = document.createElement('span');
infoSpan.textContent = content;
infoSpan.style.whiteSpace = 'pre-wrap';
dialog.add(infoSpan);

场景2：接口返回带HTML标签的结构化内容 #

使用Vaadin内置的Html组件渲染内容，不会自动转义HTML标签，可直接展示结构化排版：

注意：如果接口返回内容为用户生成的非可信内容，需要提前做XSS过滤再传入Html组件，避免安全风险

String htmlContent = yourEndpoint.fetchPhoneInfo();
Html infoContent = new Html(htmlContent);
// 可追加自定义样式类做精细样式控制
infoContent.addClassName("phone-info-content");
dialog.add(infoContent);

你可以在全局样式文件中添加自定义样式优化展示：

vaadin-dialog-overlay::part(content) {
  padding: 1.5rem;
  max-width: 480px;
}

.phone-info-content .row {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-bottom: 1px solid #f0f0f0;
}

预期展示效果参考：
#

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