The typewriter effect is configured to appear as a separate layout,

Question

The typewriter effect is configured to appear as a separate layout,

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

Below is the CSS for styling:

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

The goal is to have all the text on a single line, with a line break occurring between "I do" and the typewriter text if needed. Here's an example of the desired layout:

A problem arises when using display: flex instead of display: inline, causing a line-break in "I do" as shown here:

css reactjs flexbox inline

Answer 1

Answer №1

If you want more control over line breaks, try setting the flex-wrap attribute to wrap. This will allow elements to move to the next line rather than breaking within themselves.

Consider removing non-breaking spaces and adjusting spacing with margins on child elements instead.

Check out this example below with different container widths demonstrating how line-breaking functions:

.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

If you want more control over line breaks, try setting the flex-wrap attribute to wrap. This will allow elements to move to the next line rather than breaking within themselves.

Consider removing non-breaking spaces and adjusting spacing with margins on child elements instead.

Check out this example below with different container widths demonstrating how line-breaking functions:

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

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>

Your code is flawless, but I made a small correction to it by adding the class name properly.

TypeWriter start-tag

and then added CSS display: contents; which fixed the issue perfectly

Answer 4

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

Your code is flawless, but I made a small correction to it by adding the class name properly.

TypeWriter start-tag

and then added CSS display: contents; which fixed the issue perfectly

The typewriter effect is configured to appear as a separate layout,

Answer №1

Answer №2

Similar questions

Navigating from an error page to the homepage with Next.JS 13: A quick and easy guide

Which font file format is the most suitable for my website?

Images that dynamically adjust within the confines of a single div

The ApexChart Candlestick remains static and does not refresh with every change in state

What is the best way to apply the addClass method to a list element

Tips for keeping your avatar contained within a Bootstrap grid

What are the steps for configuring i18n translated URL paths in Next.js?

Upon clicking, Enzyme threw an error: "Method 'simulate' is intended to be executed on 1 node, but 0 were found."

Achieve a seamless transition for the AppBar to extend beyond the bounds of its container in Material

What is the best way to use Shadcn to incorporate a calendar that takes up half of my website?

How to Exclude Specific Div from CSS Stylesheet Styling

Learning the ins and outs of HTML5 and CSS3

Is there a way to trigger a custom event from a Web Component and then intercept it within a React Functional Component for further processing?

Developing a Progress Bar in Next JS Version 13

The pagination in React using React Query will only trigger a re-render when the window is in

The vertical-align property in CSS fails to function properly when applied to specific rows or columns within the

Well, it appears that I am having trouble establishing a connection between the users in this chatting application

Centered title in side menu for Ionic 3

Writing CSS rules for generating HTML code when sending emails through the command line in Go

ng-class in Angular seems to be functioning properly on <td> elements, but is not