React Typewriter组件在真实移动设备与调试工具中表现不一致问题

问题出在当前DOM结构将文本拆分为独立节点，真实移动端排版时这些节点会被浏览器当成独立的排版单元，导致前后固定文本和打字机文本脱节、换行异常。以下是具体解决方案：

核心思路 #

让所有文本内容处于同一内联排版流，避免块级元素打断文本连续性，同时统一移动端与PC端的排版规则。

1. 调整元素显示类型 #

强制所有文本相关元素为内联/内联块，确保浏览器将整个内容视为一段连续文本处理：

/* 全局或组件内的CSS */
.centeredBox {
  white-space: normal; /* 允许正常自动换行 */
  font-size: 1rem;
  line-height: 1.5;
}

.centeredBox > span,
.centeredBox > .Typewriter { /* 匹配Typewriter生成的容器 */
  display: inline !important; /* 覆盖组件默认的块级样式 */
}

#typewriter {
  color: lightblue;
  font-weight: bold;
}

.cursor {
  display: inline;
  /* 保持光标与文本同流，可保留原光标样式 */
}

2. 修改JSX结构 #

消除元素间的多余换行/空格，避免浏览器解析为额外空白：

<div class="wrapper">
  <div class="centeredBox">
    {introdata.description.first}
    <span id="typewriter">
      <Typewriter
        options={{
          strings: [
            introdata.service.first,
            introdata.service.second,
            introdata.service.third,
          ],
          autoStart: true,
          loop: true,
          deleteSpeed: 5,
        }}
        style={{ display: 'inline' }} // 强制Typewriter为内联元素
      />
    </span>
    <span class="cursor"></span>
    {introdata.description.second}
  </div>
</div>

3. 备选方案：完整字符串打字（适合不需要单独高亮固定文本的场景） #

如果允许整个句子参与打字动画，可将固定文本与打字内容拼接成完整字符串，彻底避免节点拆分问题：

<Typewriter
  options={{
    strings: [
      `${introdata.description.first} ${introdata.service.first} ${introdata.description.second}`,
      `${introdata.description.first} ${introdata.service.second} ${introdata.description.second}`,
      `${introdata.description.first} ${introdata.service.third} ${introdata.description.second}`,
    ],
    autoStart: true,
    loop: true,
    deleteSpeed: 5,
  }}
/>

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