如何相对定位文本元素 实现动态文本末尾固定跟随指定内容

通过localStorage实现两个HTML页面间的表单信息传递时，需要让固定后缀文本始终紧贴动态渲染的用户输入内容末尾，不受动态文本长度影响：

• 用户输入Luke提交后，第二页理想展示效果为 Luke's epic
• 当用户输入长度不同的名称（如Lukas、Lucius）时，固定后缀's epic始终紧跟在动态内容末尾，无错位、换行、异常间距

当前代码将动态内容和固定后缀拆分为两个独立的块级<h1>标签，块级元素默认独占整行，因此两个元素会默认上下排列，无法实现同行紧贴效果：

<h1 id="show">
<!-- 动态输出内容的渲染位置 -->
</h1>

<h1 class="epic1">'s epic <!-- 需要紧贴动态内容末尾的固定文本 -->
</h1>

之前尝试的JS逻辑仅向#show元素拼接了's字符，既没有补全完整后缀，也没有解决两个块级元素分行排列的核心布局问题，因此未达到预期效果：

<script>
  document.getElementById("show").textContent += "'s";
</script>

方案1：CSS布局修复（保留原有双元素结构） #

不需要改动HTML结构，仅通过CSS将两个h1设置为行内模式，清除默认边距，即可实现同行紧贴排列：

#show, .epic1 {
  display: inline;
  margin: 0; /* 清除h1默认上下/左右外边距，避免出现不必要的间距 */
}

搭配正确的JS渲染逻辑，页面加载时从localStorage读取用户输入值并渲染：

// 替换成你实际存储用户输入时使用的localStorage键名
const userInput = localStorage.getItem('form_username') || '';
document.getElementById('show').textContent = userInput;

方案2：DOM结构优化（语义化更好，无布局兼容问题） #

如果不需要固定后缀作为独立h1存在，直接将两部分内容放在同一个h1标签内，用行内span区分，从文档结构上就天然支持连续排列，不会出现布局异常：

<h1>
  <span id="show"></span>
  <span class="epic1">'s epic</span>
</h1>

JS逻辑和方案1一致，读取localStorage值后赋值给#show的文本内容即可，这种写法维护成本更低，不会因为CSS样式改动出现布局错位。

注意：如果采用字符串拼接的方式追加后缀，要避免重复执行拼接逻辑导致后缀重复出现，优先采用结构分离的写法，动态值和固定文本分别放在独立的行内元素中。

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