本文介绍使用纯 css 显示控制与轻量级 dom 操作，将多个 `
` 元素（含嵌套 ``）在视觉上合并为一行文本，同时完整保留动态生成的内容、语义结构和 data 属性。
要实现“将 .bold-dynamic 段落与上方 .paragraph 内容显示在同一行，并保持所有 HTML 结构、样式类、data-* 属性及动态文本不被破坏”，核心思路是避免重写 innerHTML 或剥离节点，转而通过 CSS display: inline 统一控制渲染流，辅以最小化 DOM 操作确保语义完整性。
✅ 正确做法：
- 不使用 innerText/innerHTML 读写（避免序列化/反序列化导致属性丢失）；
- 不调用 appendChild/removeChild 重构结构（防止事件监听器、框架绑定或第三方库状态丢失）；
- 仅通过 setAttribute('style', 'display: inline;') 修改呈现方式，保留原始 DOM 树。
以下是推荐的健壮实现：
// 为每个 .text 容器内所有相关元素启用 inline 显示
document.querySelectorAll('.text').forEach(container => {
// 将所有 .paragraph 及其内部所有子元素设为 inline
container.querySelectorAll('.paragraph, .paragraph *').forEach(el => {
el.style.display = 'inline';
});
// 将 .bold-dynamic 也设为 inline（注意：使用 style 属性而非 setAttribute 更可靠）
const dynamicEl = container.querySelector('.bold-dynamic');
if (dynamicEl) {
dynamicEl.style.display = 'inline';
// 可选：添加空格分隔符（提升可读性）
if (dynamicEl.previousElementSibling) {
dynamicEl.style.marginLeft = '0.25em';
}
}
});⚠️ 注意事项：
- 不要用 element.setAttribute('style', ...) 覆盖全部内联样式：它会清除已有 style 值（如 data-message-code 不受影响，但 color: red 会被覆盖）。推荐直接操作 el.style.display。
-
保留换行符处理：若原文本中
间存在空白字符（如换行、缩进），浏览器默认会将其渲染为空格。如需严格控制间距，可在 JS 中统一移除相邻文本节点间的多余空白，或用 CSS white-space: nowrap 配合 margin 微调。
-
兼容性保障：display: inline 对
和 均有效，且在所有现代浏览器及 IE11+ 中表现一致。
- 动态内容安全：因未修改 textContent 或 innerHTML，所有通过 JavaScript 注入的动态文本、Vue/React 绑定、或 data-message-code 等自定义属性均原样保留。
最终效果：
The main text is this one with bold text near, Add me near the other paragraph without losing the dynamic content.
语义未变、结构完整、属性犹存——这才是真正「无损合并」的实践方案。
