React中Typical打字机组件无法与前置文本内联展示的问题咨询

当前样式没有覆盖两个强制换行的默认行为：

• 仅给外层.typewriter-home加display: inline没有实际作用，内部的<h2>是浏览器默认块级元素，天生独占整行，会拆分行内排布
• 所用的Typical打字机组件默认渲染的包裹容器是块级属性，会单独占一行展示循环文本

替换原有CSS #

删掉原来针对.typewriter-home的单条inline设置，换成以下规则：

.typewriter-home {
  display: inline-block;
}
/* 覆盖h2的块级独占属性 */
.typewriter-home h2 {
  display: inline;
  margin: 0;
  vertical-align: baseline;
}
/* 强制Typical组件内部渲染容器为行内显示 */
.typewriter-home h2 > * {
  display: inline;
}

调整JSX文本 #

把h2内的静态文本改成预期的“I like to”，注意在静态文本和Typical组件之间留半角空格，避免内容粘连：

<div className="typewriter-home">
  <h2>I like to
    <Typical 
      loop={Infinity}
      steps={['Coding', 2000,'Soccer', 2000, 
              'Basketball', 2000, 'Finance', 2000,
              'Tech', 2000]}
    />
  </h2>
</div>

效果校验 #

调整后所有元素都在同一文本流内排布，静态文本和打字机效果内容会处于同一行，不会出现强制换行。如果后续出现文字高低错位，保留h2样式里的vertical-align: baseline即可让前后文字的基线完全对齐。

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