Create a dynamic effect by adding space between two texts on the page

Question

Create a dynamic effect by adding space between two texts on the page

const Button = () => {

    const options = ['test1', 'test2', 'test3'];

    return (
         <div style={{ position: 'absolute', left: '8px', width: 'auto', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', backgroundColor: '#006C84' }}>
            {options.map(opt => (<span style={{ paddingRight: '10px' }}>{opt}</span>))}
         </div>
     )
    }

I have a code snippet above which is showing some extra space at the end of the text. How can I remove that space?

https://i.stack.imgur.com/07uX0.png

javascript css reactjs arrays

Answer 1

Answer №1

When applying paddingRight: 10px to the span, there is some leftover space shown at the end of the last child.

There are a couple of ways to address this:

Using JavaScript
Utilizing CSS

JavaScript Approach

{options.map((opt,index) => (
        <span style={{ paddingRight: options.length - 1 === index ? '10px' : "0px" }}>{opt}</span>)
   )}

CSS Approach To resolve this issue, consider switching from inline styles to an explicit style or creating a separate style object for better organization and maintenance.

  <div className="parent">
        {options.map(opt => (
            <span style={{ paddingRight: '10px' }}>{opt}</span>)
        )}
     </div>

.parent{//parent css goes here}
.parent span:not(::last-of-type){padding-right: 10px}

Answer 2

When applying paddingRight: 10px to the span, there is some leftover space shown at the end of the last child.

There are a couple of ways to address this:

Using JavaScript
Utilizing CSS

JavaScript Approach

{options.map((opt,index) => (
        <span style={{ paddingRight: options.length - 1 === index ? '10px' : "0px" }}>{opt}</span>)
   )}

CSS Approach To resolve this issue, consider switching from inline styles to an explicit style or creating a separate style object for better organization and maintenance.

  <div className="parent">
        {options.map(opt => (
            <span style={{ paddingRight: '10px' }}>{opt}</span>)
        )}
     </div>

.parent{//parent css goes here}
.parent span:not(::last-of-type){padding-right: 10px}

Answer 3

Answer №2

const ButtonComponent = () => {

    const buttonOptions = ['option1', 'option2', 'option3'];

    return (
        <div style={{ display: 'flex', gap: '10px', backgroundColor: '#006C84', alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', position: 'absolute', left: '8px', width: 'auto' }}>
            {buttonOptions.map(option => (
                <span>{option}</span>)
            )}
        </div>
   )
}

Include the use of display: flex and gap in the styling of the parent div

Visit this link for a live demo

Answer 4

const ButtonComponent = () => {

    const buttonOptions = ['option1', 'option2', 'option3'];

    return (
        <div style={{ display: 'flex', gap: '10px', backgroundColor: '#006C84', alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', position: 'absolute', left: '8px', width: 'auto' }}>
            {buttonOptions.map(option => (
                <span>{option}</span>)
            )}
        </div>
   )
}

Include the use of display: flex and gap in the styling of the parent div

Visit this link for a live demo

Create a dynamic effect by adding space between two texts on the page

Answer №1

Answer №2

Similar questions

I am facing an issue with my React Native splash screen

Is there a way to align an image to the center using the display grid property?

Adjusting height in Google Maps to fill the remaining space

What could be causing my grid to malfunction once the media query is triggered?

Making the text gradually disappear at the bottom of a section using a see-through overlay, while ensuring the height remains within the boundaries of the section even

Tips for modifying padding in HTML and CSS?

Encountering an unusual hash code when implementing Google Tag Manager in a Next.js project was

Unable to serve certain file extensions from the .NET Core local server even after making changes to the <requestFiltering> section in the applicationHost.config file

Encountering error while processing order in React.js using Stripe

Unleash the Power of Connecting Web Browsers with Local Filesystems (

Inexplicably bizarre HTML glitch

In ReactJS, the date range picker allows users to select a maximum date that is restricted to 30 days from

NextJS useState data being accessed incorrectly by Axios

It's impossible to center text in Bootstrap 5

Encountering a 500 Error and an Unexpected token < issue in the JSON at position 0 while deploying a MERN stack

Steps to deploy a create-react-app-2 build on an IIS server

How to target only the parent div that was clicked using jQuery, excluding any

What is the correct way to generate a normal map using THREE.js?

What are the steps for creating an animated visualization of the peak chart?

Retrieve information according to the object ID with AngularJS UI-Router and $stateParams