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

对于（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>

希望有帮助！

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

1 个答案: