Search code examples
cssreactjsflexboxinline

Typewriter effect layout not inline

<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>

And this is the CSS:

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

I want all of the text to be on the same line if possible, but, if not, then I want the line break to happen between "I do" and the typewriter text instead of making "I do" display on two lines. Like this:

enter image description here

I am running into trouble when I use display: flex instead of display: inline, getting a line-break in "I do" like this:

enter image description here

Solution

  • You can get better control over the line breaks by setting the flex-wrap attribute to wrap so that elements wrap to the next line before breaking lines within themselves (in other words, an element will move to the next line instead of breaking itself into multiple lines if it can).

    You might also consider removing that non-breaking space and control spacing with margins on the children instead.

    Here's an example with a few different container widths to show how line-breaking works:

    .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>