javascript - 使用 css 显示 javascript 的奇怪问题

Question

我编写的 JavaScript 代码有一个奇怪的问题。我目前有多达 1009 行代码，所以我很想知道从哪里开始解决这个问题。

我正在使用 getelementid 从外部 JS 文件显示为 HTML，然后使用 CSS 为 JS 客户端设置动画。

display("<p>Welcome to TextHacker, a text based hacking simulation game</p>");

代码有效，但它只打印出“欢迎使用 TextHacker，一个基于文本的黑客模拟器”，然后在浏览器中停止。我在 Chrome、Firefox、Opera 和 Valadi 中遇到了同样的问题，所以我不确定我做错了什么。

这是CSS代码:

p {
  color: lime; 
  font-family: "Courier";
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: type 4s steps(60, end); 
}

p:nth-child(2){
  animation: type2 8s steps(60, end);
}

p a {
  color: lime;
  text-decoration: none;
}

span{
  animation: blink 1s infinite;
}

@keyframes type { 
  from { width: 0; } 
} 

@keyframes type2 {
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

   @keyframes blink {
    to{opacity: .0;}
   }

   ::selection {
     background: black;
    }

Answer 1

你的宽度 chop 了文字。

p {
  width: 60em;
}

https://jsfiddle.net/08y8yknn/