本文介绍如何在 flutter 中通过预处理 html 字符串、移除默认换行标签（如 `
`），并手动构建内联段落，实现多个 htmlwidget 元素在同一行中自然衔接显示。
在开发 Flutter 字典类应用时，常需渲染富文本（如带格式的释义、音标或例句），flutter_html 或 html_widget 等库提供了便捷的 HtmlWidget 组件。但默认情况下，HTML 字符串若包含 <p> 标签，会被渲染为块级元素，导致相邻 HtmlWidget 实例强制换行——即使你希望它们像普通句子一样内联排列（例如：“词根 [IPA]”）。
解决的关键在于：控制 HTML 语义结构，而非依赖多个独立的 HtmlWidget 并列布局。Flutter 的 Row 或 Wrap 对 HtmlWidget 的内联对齐支持有限（因其内部已封装完整 DOM 渲染逻辑），更可靠的方式是合并 HTML 字符串，在单个 HtmlWidget 中统一渲染。
以下是一个经过验证的实用方案：
Widget mergeHtml(String html1, String html2) {
// 移除原始 HTML 中可能存在的 <p> 和 </p> 标签（避免嵌套段落导致换行）
final cleanHtml1 = html1.replaceAll(RegExp(r'<\/?p[^>]*>'), '');
final cleanHtml2 = html2.replaceAll(RegExp(r'<\/?p[^>]*>'), '');
// 构建内联段落：使用 <p> 包裹整体，并添加内联样式（可选 font-size、line-height 等）
final mergedHtml = '<p style="font-size:18px; margin:0; display:inline;">'
'$cleanHtml1 <span style="margin:0 4px;">[</span>'
'$cleanHtml2<span style="margin:0 4px;">]</span></p>';
return HtmlWidget(mergedHtml);
}调用方式（确保字段非空）：
立即学习“前端免费学习笔记（深入）”；
mergeHtml( allwordlist![0].tina ?? '', allwordlist![0].itavi ?? '', )
✅ 注意事项：
- 使用 RegExp(r'<\/?p[^>]*>') 替代简单字符串替换，可兼容带属性的 <p class="...">；
- margin:0 和 display:inline 是防止段落默认外边距与块级行为的关键 CSS；
- 若需更复杂排版（如不同颜色、下划线、点击响应），建议在 <span> 中添加 style 或 class，并通过 customStylesBuilder 配置 HtmlWidget；
- 始终对 allwordlist![0].xxx 做空值检查（如 ?? ''），避免运行时异常。
该方法轻量、可控，无需引入额外布局组件，完美适配字典场景中“词条 + 音标”“原形 + 词性”等高频内联需求。
