CSS Word Wrap 不适用于 react Typewriter 插件和更多问题

Question

所以我在我新创建的 React 网站/webapp 上有这个部分。目前，我正在使用this react plugin on npmjs 在文本上创建打字机效果。

有一些问题。第一个是文本（记住在同一个 h2 标签中）在另一行。我无法弄清楚如何为我的一生解决这个问题。

然后，使用长文本/字符串 - 它不能正确地换行文本（我希望它在不影响下面图标容器宽度的情况下将突出的单词换行到新行上） - 但它只是不这样做要么。

这是我的 React 代码：

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

这是我的 (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');
}

非常感谢您提供的任何帮助，我一直在用头撞墙！

谢谢， 亨利。

Answer 1

打字机组件默认包裹在一个 div 和 divs 中display:block。所以你可以用一个跨度包装组件并使跨度display:inline-block像

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

至于调整大小是因为iconfont 宽度设置为 100%，所以当父级由于打字机组件渲染而调整大小时，它也会调整大小。您可以为iconfont 类设置最大宽度或设置不基于百分比的宽度（px、em、rem）。

Answer 2

快速解决方法是将display: inline-flex 添加到您的h2，如下所示：

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

You can see the result here

至于换行问题，我只有在将数组功能与 strings 一起使用时才发现它，但使用方法反而会给我预期的结果....唯一的问题是您必须拆分数组（请参阅代码）。或者您可以映射您的数组并仅引用 typeString 中的项目。

See screen recording here

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