打字机效果布局不是内联的

Question

<div className= "HomePage-typewriter">
  I do{'\u00A0'}
  <Typewriter
    options={{
      strings: [
        '<span> this </span>',
        '<span> that </span>',
        '<span> this </span>',
      ],
      autoStart: true,
      loop: true,
      deleteSpeed: 20,
      delay: 55,
      pauseFor: 50
    }}
  />
</div>

这是 CSS:

.HomePage-typewriter {
  display: inline;
  text-align: left;
}

如果可能的话，我希望所有的文本都在同一行，但是，如果不行，那么我希望换行符发生在 "I do" 和打字机文本之间，而不是 "I do" 分两行显示。像这样：

当我使用 display: flex 而不是 display: inline 时，我运行遇到了麻烦，在 "I do" 中换行是这样的：

Answer 1

您可以通过将 flex-wrap 属性设置为 wrap 来更好地控制换行符，以便元素在换行之前换行到下一行（换句话说，元素将移动到下一行，而不是尽可能地将自己分成多行。

您也可以考虑删除不间断 space 并改为控制子项上的边距间距。

下面是一个示例，其中包含几个不同的容器宽度，以说明换行的工作原理：

.container {
    width: 6rem;
    border: 1px solid #ddd;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.container.wide {
    width: 9rem;
}

.container.narrow {
    width: 3rem;
}

.container > *:not(:last-child) {
    margin-right: .2rem;
}

.container span:nth-child(2) {
    color: purple;
}

<div class="container wide">
  <span>First phrase</span>
  <span>Second</span>
</div>

<div class="container">
  <span>First phrase</span>
  <span>Second</span>
</div>

<div class="container narrow">
  <span>First phrase</span>
  <span>Second</span>
</div>

Answer 2

<div className= "HomePage-typewriter">
  I do{'\u00A0'}
  <Typewriter class="Provide_Class Name"
      strings: [
        '<span> this </span>',
        '<span> that </span>',
        '<span> this </span>',
      ],
      autoStart: true,
      loop: true,
      deleteSpeed: 20,
      delay: 55,
      pauseFor: 50
    }}
  />
</div>

你的代码很完美但是。我在上面添加更正提供 class 名称

TypeWriter start-tag

然后添加 CSS display: contents; 它完美无缺

打字机效果布局不是内联的

Typewriter effect layout not inline

css

inline

flexbox

reactjs