React 打字机在手机或平板电脑和笔记本电脑上的工作方式不同，而不是在 devtool 的屏幕上工作

Question

它可以在笔记本电脑/PC 上完美运行，也可以在开发工具中运行，尝试过所有屏幕尺寸，它都可以完美运行。 其工作原理就像打字机在调整自身并换行后从句号整个字符串中写入一样。它适用于开发工具上的移动尺寸。

但在实际手机或平板电脑/iPad 中，它显示为 3 行，如下所示：

1. 嗨，我是一名精通
的软件开发人员
2. {打字机文本}
3. 。 Lorem ipsum。

如果屏幕尺寸较小，但打字机效果似乎与前后字符串分离，则第一行会换行。

                <div class="wrapper">
                  <div class="centeredBox">
                  {introdata.description.first}
                    <span id="typewriter" style={{ color: 'lightblue', fontWeight: 'bold',  }}>
                    <Typewriter
                    options={{
                      strings: [
                        introdata.service.first,
                        introdata.service.second,
                        introdata.service.third,
                      ],
                      autoStart: true,
                      loop: true,
                      deleteSpeed: 5,
                    }}
                  />
                  </span>
                    <span class="cursor"></span>
                    {introdata.description.second}
                  </div>
                </div>

我尝试做类似“嗨，我是一名精通{打字机文本}的软件开发人员。Lorem ipsum”之类的事情。

在这种情况下，我将整个文本分为三部分：

1. 嗨，我是一名精通

   的软件开发人员

2. {打字机文本}

3. 。 Lorem ipsum。

Answer 1

我不确定这是否适用于您的问题，但据我所知浏览器和移动设备处理换行符和内联元素的方式有点不同。

您可以在 span#typewriter 中添加空白：'nowrap'到您的样式中 还可以尝试在 Hi I'm a Software Developer proficiency in Lorem ipsum 之后和之前添加“ ”。像这样：

 Hi I'm a Software developer proficient in 
 Lorem Ipsum