本文介绍使用纯 css 显示控制 + 少量 javascript 安全合并 html 段落的方法，避免使用 innerhtml/innertext 和 dom 移动操作，在保留所有结构、样式和 data 属性的前提下，实现多段文本（含嵌套标签）在视觉上“连成一行”的效果。

在实际开发中，常遇到这样的需求：多个语义化 <p> 标签本应构成连续文句（如主文案 + 动态提示），但默认块级行为导致换行，而直接使用 innerHTML 拼接或 appendChild 移动节点又可能破坏事件绑定、data 属性、CSS 类名或框架响应式逻辑——尤其当 .bold-dynamic 是由前端框架（如 Vue/React）动态渲染或后端注入时，硬编码或重写内容风险极高。

✅ 正确解法是不改变 DOM 结构，仅通过 CSS 控制视觉呈现，并用轻量 JavaScript 统一设置 display: inline 行为，确保：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

• 所有 <p class="paragraph"> 及其内部 <span> 等子元素保持原结构与属性；
• <p class="bold-dynamic"> 保留 data-message-code 等动态属性，不丢失任何元信息；
• 文本自然流式排布，逗号、空格等标点仍由 HTML 原生空白符处理（无需手动拼接字符串）；
• 兼容现代浏览器及主流框架生命周期（无重渲染冲突）。

以下是推荐实现代码：

// 遍历每个 .text 容器，统一设置内联显示
document.querySelectorAll('div.text').forEach(container => {
  // 设置所有 .paragraph 及其后代为 inline
  container.querySelectorAll('p.paragraph, p.paragraph *').forEach(el => {
    el.style.display = 'inline';
  });

  // 设置 .bold-dynamic 为 inline，并保留原有 style（如需兼容旧版 IE 可用 setAttribute）
  const dynamicEl = container.querySelector('p.bold-dynamic');
  if (dynamicEl) {
    dynamicEl.style.display = 'inline';
  }
});

? 关键注意事项：

• ✅ style.display = 'inline' 是安全的——它只覆盖显示方式，不影响 class、dataset、textContent 或事件监听器；
• ⚠️ 若 .paragraph 内含 <br> 或 block 子元素（如 <div>），需额外处理（建议改用 <span> 语义化嵌套）；
• ✅ 动态内容（如 data-message-code="dynamic-message"）完全保留，后续 JS 仍可读取：

  console.log(document.querySelector('.bold-dynamic').dataset.messageCode); // "dynamic-message"

• ? 如需添加自然分隔符（如逗号+空格），可在 .bold-dynamic 前插入一个 ::before 伪元素（纯 CSS 方案）：

  p.bold-dynamic::before {
    content: ", ";
  }

最终视觉效果即为：
“The main text is this one with bold text near, Add me near the other paragraph without losing the dynamic content.”
——结构未变、数据完好、语义清晰、维护友好。