CSS-使居中文本看起来像打字机

Question

我正在尝试制作一个居中的、单行的文本，它的字母一个接一个地出现，光标在它的右边。我使用下面的代码，但它有一些问题我还不能解决：

1( 虽然我使用text-align: center，但文本一开始并不居中，而是在左侧，然后转到中心

2( 文本最初不是出现在一行上，而是出现在多行中。

.header {
background-color: black;
padding: 2%;
text-align: center;
}
.test {
color: white;
overflow: hidden;
font-size:25px;
border-right:2px solid #7CDD26;
animation-delay: 2s;
animation-duration: 12s;
animation-fill-mode: both;
animation-name: spin1;
}
@-webkit-keyframes spin1 {
0% {width:0px;border-right:0px;}
1% {width:0px;border-right:2px solid #7CDD26;}
99% {width:400px;border-right:2px solid #7CDD26;}
}

<div class="header">
<div class="test">This is a test.</div>
</div>

Answer 1

For(a(-由于将width属性设置为块级元素(div(，因此需要向auto添加边距，以便使元素居中。text-align属性将文本集中在容器内，而不是容器本身。

至于(b(-您已经设置了overflow属性，但由于尚未设置height，因此初始值为auto。

所以你的代码可以调整为：

.header {
background-color: black;
padding: 2%;
text-align: center;
}
.test {
color: white;
overflow: hidden;
font-size:25px;
border-right:2px solid #7CDD26;
animation-delay: 2s;
animation-duration: 12s;
animation-fill-mode: both;
animation-name: spin1;
margin: auto;
height: 25px;
}
@-webkit-keyframes spin1 { 
from {width:0px;border-right:0px;}
to {width:400px;border-right:2px solid #7CDD26;}
}

<div class="header">
<div class="test">This is a test.</div>
</div>

希望能有所帮助！