So I have this section on my newly created React website/webapp. Currently, I am using

Then, with long text/strings - it does not wrap the text properly (I want it to wrap the overhanging words onto a new line without affecting the width of the icon container below) - but it just doesn't do that either.

Here is my React code:

<section className="Hero content"> {/* class 'content' is a content failsafe constraint. */}
                <Navbar />

                <div className="herocont">
                        <div className="discordpfp" />

                    <div className="textsect">
                        <div className="title">
                            <h1 className="maintext">Hi, I'm Psuedodoro</h1>
                        </div>

                        <div className="subtitle">
                            <h2 className="subtext">I'm a&nbsp; <Typewriter
                                    options={{
                                        autoStart: true,
                                        loop: true,
                                        cursor: '|',
                                        delay: 10,
                                        strings: ["FS Dev", "CS Student", "Discord Administrator", "UI/UX Designer", "VR Enthusiast"],
                                        wrapperClassName: 'typed-wrapper'
                                    }}
                                />
                            </h2>
                        </div>

                        <div className="iconcont">
                            <div className="icons">
                                <FaGithub className="icon" />
                                <FaDiscord className="icon" />
                                <MdEmail className="icon" />
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <div className="waves1" />

And here is my (s)css:

/* Stylesheet for the homepage */

h1, h2 {
    font-weight: 400;
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

b {
    font-weight: 600;
}

.herocont {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-top: 5em;

    .discordpfp {
        border-radius: 100%;
        aspect-ratio: 1/1;
        height: 16em;
        background-image: url(../../../resources/discordpfp.png);
        
        /* Center the image in the div */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        filter: drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.25));
    }

    .textsect {
        display: inherit;
        margin-left: 7em;
        justify-content: center;
        flex-flow: column;
        white-space: nowrap;
    }

    .maintext {
        text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
    }

    .subtitle {
        white-space: pre-line;
        margin-top: 0.5em;
        width: 100%;
        overflow-wrap: break-word;
        flex-wrap: wrap;
    }

    .iconcont {
        display: inherit;
        justify-content: center;
        align-items: center;
        margin-top: 2em;
        width: 100%;
        min-height: 3.5em;
        border-radius: 25px;
        background: hsla(206, 100%, 16%, 0.5);
        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25);
        
        .icons {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }

        .icon {
            aspect-ratio: 1/1;
            vertical-align: middle;
            font-size: 2.5rem;
        }
    }
}

.waves1 {
    aspect-ratio: 3/2;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../../../resources/SepHome2.svg');
}

Thanks a lot for any help you can give, I have been banging my head against the wall on this one!

Thanks, Henry.

CodePudding user response：

The typewriter component is wrapped inside a div and divs by default display:block. So you could wrap the component by a span and make the span display:inline-block like

<span style={{display:"inline-block"}}>
  <TypewriterComponent>...</TypewriterComponent>
</span>

As for the resizing it's because the iconfont width is set to 100%, so when parent resizes due to the Typewriter component rendering it resizes too. You can set a max-width for the iconfont class or set a width that is not % based (px,em,rem).

CodePudding user response：

A quick fix can be to add display: inline-flex to your h2 as here:

<h2 style={{display: "inline-flex"}}>I'm a &nbsp;<Typewriter

You can see the result here

As for the wrap issue, I only find it when I use the array feature with strings but using methods instead gives me the expected result....the only problem is you would have to split up your array (see code). Or you could map your array and just reference items in typeString.

See screen recording here

<Typewriter
  options={{
    autoStart: true,
    loop: false,
    delay: 0,
    cursor: "",
  }}
  onInit={(typewriter) => {
    typewriter
    .typeString('<div >Discord Administrator Extra long text here</div>')
    .pauseFor(100)
    .deleteAll(50)
    .pauseFor(1000)
    .typeString("<div>VR ENTHUSIAST</div>")
      .start();
  }}