本文介绍如何将多个 htmlwidget 渲染的 html 内容（如词典词条与注音）合并到同一段落中，消除默认换行，实现自然的内联排版效果。核心方法是预处理 html 字符串，移除干扰内联布局的 `
` 标签，并通过自定义 `
` 包裹合并后的内容。
在使用 flutter_html 或类似 HTML 渲染插件（如 html_widget）构建词典类应用时，常需将词条（如 tina）与其注音或释义（如 itavi）并排显示于同一语句中，例如：“kava [kaˈva]”。但直接连续放置多个 HtmlWidget 实例往往会导致换行——这是因为原始 HTML 字符串中隐含或自动生成了
标签，而 HtmlWidget 默认将
渲染为块级元素，强制独占一行。
解决的关键在于控制 HTML 结构层级：不依赖多个独立 HtmlWidget，而是将内容预处理后合并为单个 HTML 字符串，再交由一个 HtmlWidget 渲染。以下是一个稳健、可复用的封装函数：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
Widget mergeHtml(String html1, String html2) {
// 移除输入 HTML 中可能存在的 <p> 和 </p> 标签（避免嵌套块级结构）
final cleanHtml1 = html1.replaceAll(RegExp(r'<\/?p[^>]*>'), '');
final cleanHtml2 = html2.replaceAll(RegExp(r'<\/?p[^>]*>'), '');
// 构建内联段落：统一字体大小，添加空格与方括号分隔
final mergedHtml = '''
<p style="font-size: 18px; margin: 0; display: inline;">
$cleanHtml1 [$cleanHtml2]
</p>
''';
return HtmlWidget(mergedHtml);
}调用方式简洁明了：
立即学习“前端免费学习笔记（深入）”；
mergeHtml( allwordlist![0].tina.toString(), allwordlist![0].itavi.toString(), )
⚠️ 注意事项：
- 使用 RegExp(r']*>') 替代简单字符串替换，可匹配带属性的
或
等变体，提升鲁棒性；
- 添加 margin: 0 和 display: inline 样式确保段落自身不引入额外间距或换行；
- 保证词条与注音间有不可断行的空格，比普通空格更可靠；
- 若原始 HTML 含复杂结构（如嵌套 、列表等），建议先用轻量 HTML 解析器（如 html 包）提取纯文本，再构造安全内联 HTML，避免 XSS 风险。
此方案兼顾灵活性与可控性，无需修改底层渲染逻辑，即可精准实现“一句话式”双元素内联展示，特别适合词典、术语表、语法标注等场景。
