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:

https://i.sstatic.net/1uNW8.gif

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

https://i.sstatic.net/RETm5.gif

cssreactjsflexboxinline

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

<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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a virtual roulette wheel with JavaScript

I'm currently working on creating a roulette wheel using JavaScript. While researching, I came across this example: , but I wasn't satisfied with the aesthetics. Considering that my roulette will only have a few options, I was thinking of using ...

javascriptjqueryhtmlcss

File not found: The specified file 'C:Self Project eact-shopper eact-shopperclientuildindex.html' does not exist

I followed the tutorial and startup code by Reed Barger exactly, but every time I try to run the server I encounter this error: Error: ENOENT: no such file or directory, stat 'C:\Self Project\react-shopper\react-shopper\client&bso ...

javascriptnode.jsreactjsexpressmern

The npm command encountered a permission issue when trying to install node-sass

Whenever I run the npm command on my Ubuntu system, I encounter a "permission denied" issue. sudo npm install node-sass EACCES: permission denied, access '/node_modules/node-sass' I have attempted to run the command as a root user or with sudo ...

javascriptreactjsubuntunpm

Modify the bootstrap dropdown background to display only an image

I am looking to make the image in a dropdown/dropup menu fill the entire background of the dropdown. Currently, there is still white space visible around the image. How can I ensure that the dropdown shows only the image and includes a scroll wheel? Addit ...

htmlcssbootstrap-4

Stylish hover effects displayed on disabled button using Styled Components

I am currently working on a button using Styled Components. However, even when the button is in a disabled state (:disabled), it still exhibits hover behavior that should not be present. I am wondering if there is a proper way to prevent hover effects when ...

javascriptreactjsstyled-components

Tips for converting numerical values to visual elements in a JQUERY slider for images

I am looking to incorporate a similar image slider on my website, like the one showcased here: . However, I want the bottom content numbers to be replaced with smaller versions of the images in the slider instead. Does anyone have any suggestions on how I ...

jqueryhtmlcss

JQuery hover effect for dynamically added elements

Currently, I am working on a webpage that will trigger an ajax call upon loading. The response data in JSON format will be processed and the elements will then be added to the DOM as shown below: $.ajax({ type: 'POST', url: "http://mysite.de ...

javascriptjquerycssajax

Clicking on a link does not place the focus on the corresponding input field

My project involves creating a One Pager website with a navigation menu. I am looking to implement radio inputs that are associated with the clicked link (a) so that I can apply CSS styles to the active radio button. Currently, the CSS is applied when the ...

htmlcss

Tips for altering the color of an activated Bootstrap dropdown toggle

When the Dropdown menu is open, I would like to customize its default colors. Specifically, I want to change the border color and background using CSS. https://i.sstatic.net/vKwLE.png Below is the HTML code snippet: <div class="row menu"> <ul ...

htmlcsstwitter-bootstrap

Is it necessary for the React generic type prop to be an extension of another type

I have recently started using TypeScript and I am facing a confusion regarding passing generic types into my higher-order component (HOC). My objective is to pass the component props as a generic type in order to have the Component with those specific type ...

reactjstypescriptreact-native

What is the optimal method for transmitting both an image and JSON data to my express server?

Hey there! So I've set up a MongoDB database and I'm using Mongoose to work with it. Here's the model I have for my product: const productSchema = new Schema({ name: { type: String, required: true}, description: { type: String, required ...

javascriptreactjsmongodbexpressmongoose

Having trouble accessing the ReactJS website on my localhost after downloading it from Github

After downloading multiple websites from GitHub and other free sources, I encountered an issue - they were missing node modules. As a result, I was unable to open the websites at localhost:3000. ...

reactjsgithubweb-development-server

Scrolling vertically using window.open functionality

I am trying to open a pop-up window using window.open. I would like the scrollbars to appear only if necessary. Unfortunately, in Safari, the scrollbars do not show up unless I include scrollbars=1 in the code. However, this also causes horizontal scrollb ...

javascriptcsspopup

Styling text using SVG in HTML

I'm trying to underline a text element in SVG using the text-decoration attribute, but I'm running into an issue with the color of the line not changing. Here is the code snippet I am working with: <svg id="svg" viewBox="0 0 300 ...

javascripthtmlcsssvgtext-decorations

Instructions on passing props or conditions to a nested style method within Material UI

One of the challenges I encountered in my React app involves styling with Material UI and specifically using the makeStyles function. The issue arises when applying two styles that depend on a condition called isRTL. In cases where isRTL is true, a specif ...

reactjsmaterial-ui

Only the first column of a row in Flexbox will have a line break when exceeding the

Currently, I am utilizing flex with a row direction for a set of items with fixed widths causing overflow and a horizontal scrollbar, which is the desired outcome. Nevertheless, my requirement is for the first column in these rows to be full-width, while ...

javascriptcssflexboxcss-gridflexboxgrid

Something seems off with Chrome

I am facing a unique issue that I need help with. Unfortunately, the code is too long to post here but essentially it involves creating a menu for a website. The menu works perfectly and looks great on all browsers except for Chrome. This is unusual as Ch ...

htmlcssgoogle-chromefrontend

What is the best way to increase padding in a Vuetify view element?

I have been attempting to increase the padding of my view by utilizing the "px-5" class on the container within the view. However, I am struggling to achieve the desired amount of padding. What I am aiming for is padding similar to what is shown in this sc ...

cssvue.jsvue-componentvuetify.js

The bootstrap 4 modal is not displaying the button as expected

I am currently working on an Angular 4 project and I am trying to implement a pop-up using Bootstrap 4. <div> <span class="text-center" id="span1">{{title}}</span> <button type="button" class="btn primary-btn" data-toggle="modal" data ...

csstwitter-bootstrapbootstrap-modalbootstrap-4

When React JS and PHP(Mysql) combine, the error message "records.map is not a function" may appear

What problem am I facing with my code? The issue lies in my JavaScript code while trying to display the JSON array fetched correctly by the PHP file. The JavaScript implementation of JSON in the state is accurate, but an error occurs when attempting to us ...

javascriptarraysreactjs