当屏幕是桌面大小的时候，我可以让它在一行中工作，但是当我把屏幕变小的时候，我就不能让它在多行中工作。
我知道我可以用媒体查询来缩小文本，但老实说，如果它停留在一行中，看起来很奇怪。
超文本标记语言：

<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);}
}

型
`