如何在 CSS 中制作响应式打字机动画？

Question

当屏幕为桌面大小时，我已经设法使其在一行中工作。但当我缩小屏幕尺寸时，我无法使其进入多行。

我知道我可以通过媒体查询使文本变小，但说实话，如果它留在一行中，它看起来很奇怪。

HTML：

<div class="bg-video-wrapper">
    <div class="typewriter">
    <h1>Budi izvrstan u onom što voliš.</h1>
</div>

CSS：

.bg-video-wrapper h1{
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 50rem;
    height: 3rem;
    color: var(--white-color);
    text-align: center;
}

/* typing animation - budi izvrstan*/
.typewriter h1{
    overflow: hidden;
    border-right: 1px solid var(--yellow-color);
    padding-right: 10px;
    white-space: nowrap;
    letter-spacing: 6px;
    animation: 
        typing 7s steps(40, end) infinite,
        blink-cursor .75s step-end infinite;
}

@keyframes typing {
    from{
        width: 0;
    }
    to{
        width: 100%;
    }
}

/* typewriter cursor effect */
@keyframes blink-cursor {
    from, to {border-color: transparent;}
    50%{border-color: var(--yellow-color);}
}

`

Answer 1

您只需添加

word-wrap: break-word;

.bg-video-wrapper h1 {
  /* Allow text to wrap */
  word-wrap: break-word;
}