Как убрать выползание блока за границы родительского?

Question

[Дмитрий Щербаков]

У меня стоит блок, с позицией абсолют, в этом блоке находится строка к которой подключен скрипт печатающегося текста, то есть ей позицию абсолют не задашь, т.к. перестаёт перемещаться курсор, всё хорошо работает, но при сужении экрана, моя строка выползает за границы этого родительского блока, помогите пожалуйста решить эту проблему, вот скриншоты и код:
Это при стандартном разрешении(как должно выглядеть)

Это при сужении:

Вот исходники:

<div class="pech_text">
					<span class="header_typed_text">
						
					</span>
				</div>

.pech_text {
    top: 10vw;
    width: 100%;
    height: 2.7vw;
    position: absolute;
    top: 10vw;
}
.typed-cursor {
	font-size: 2vw;
}
.header_typed_text{
    font-family: "PFAgoraSansPro-Regular";
    font-size: 1.52vw;

}

Comments

[Павел Корнилов]

Как вариант - добавить в скрипте проверку ширины экрана и динамически подгонять под него.
Ещё можно сделать overflow:hidden.

[Дмитрий Щербаков]

KorniloFF, Тут дело в том, что всё вмещается, просто родительский блок позиции абсолют, а строка нет, у меня такая проблема была многократно, но в остальных случаях я просто дочерним блокам назначал позицию абсолют и всё, тут же такое не работает, из за анимации печатающегося текста.
Overflow тоже не работает тут.

[Павел Корнилов]

Использовать абсолютное позиционирование - это вообще бэд практик. Но дочернему блоку фиолетово, как позиционирован родительский, если у него position:static.
А вот изменения экрана скрипт может не учитывать, смотря какая там логика заложена. Он может единократно проверять ширину экрана в начале своей работы и ориентироваться в дальнейшем на это значение. А можно сделать, чтобы при появлении каждой буквы скрипт проверял ширину. И в случае её изменения постраивал ширину своего блока.
Или вообще watch навесить, если кроссброузерность не сильно интересует в этом вопросе.