css - 打字机文字效果 - 不响应

Question

我正在使用这个 css 来创建打字机文本效果，但是在移动设备上，文本超出了屏幕范围，我无法断线。

.typewriter {
    font-family: Courier, monospace;
    display: inline-block;
}
.typewriter-text {
    display: inline-block;
    overflow: hidden;
    letter-spacing: 2px;
    animation: typing 5s steps(30, end), blink .75s step-end infinite;
    white-space: nowrap;
    font-size: 30px;
    font-weight: 700;
    border-right: none;
    box-sizing: border-box;
}
@keyframes typing {
    from { 
        width: 0% 
    }
    to { 
        width: 100% 
    }
}
@keyframes blink {
    from, to { 
        border-color: transparent 
    }
    50% { 
        border-color: orange; 
    }
}

有任何想法吗？

标签： cssmobileresponsive-design