JavaScript：不丢失动态内容合并段落至同一行的实现方案

核心思路 #

通过CSS控制元素显示逻辑，无需修改DOM结构或内容，即可实现文本合并为一行的效果，同时完整保留动态内容的可编辑性。

实现代码 #

/* 将所有段落转为行内元素，消除块级元素的默认换行 */
.text p {
  display: inline;
  margin: 0;
  padding: 0;
}

/* 为动态段落添加前置逗号，无需硬编码目标元素 */
.text p[data-message-code="dynamic-message"]::before {
  content: ", ";
}

方案说明 #

1. display: inline 将原本块级的<p>元素转为行内元素，使其与内部<span>自然处于同一行
2. 通过[data-message-code="dynamic-message"]属性选择器定位动态段落，避免硬编码类名或内容
3. 使用::before伪元素添加连接逗号，完全不改动DOM内容，动态段落的后续内容更新会自动同步显示
4. 清除段落默认的margin和padding，消除多余间距保证文本连贯

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