仅用CSS在固定对话气泡内实现打字机动画的问题排查

嘿，我来帮你搞定这两个头疼的问题！咱们一步步来：

问题1：对话气泡左侧箭头丢失 #

你的箭头消失是因为.typewriter-text设置了display: inline-block，把原本作为块级元素的<p>标签改成了行内块，导致伪元素::after的定位逻辑混乱。解决方法是把气泡容器和打字机文本容器分开：

修改HTML结构 #

将原来的复合类拆分，让.bubble保持块级属性，用内部的<span>来承载打字机动画：

<div class="comments">
  <p class="comment bubble"><span class="typewriter-text">Lorem ipsum et est... Lorem ipsum et est... Lorem ipsum et est... Lorem ipsum et est... Lorem ipsum et est... Lorem ipsum et est...</span></p>
</div>
<div class="comments">
  <p class="comment bubble"><span class="typewriter-text">Lorem ipsum et est... Lorem ipsum et est... Lorem ipsum et est...</span></p>
</div>

调整CSS #

移除.typewriter-text里的display: inline-block（或者保留，但确保.bubble是块级），并修正伪元素的定位：

.bubble {
  position: relative;
  background: rgb(27,29,81);
  padding: 20px;
  color: white;
  border-radius: 2px;
  margin-left: 20px;
  width: 1175px;
  /* 确保气泡是块级，伪元素定位正常 */
  display: block;
}

.bubble::after {
  content: "";
  display: block;
  position: absolute;
  left: -15px; /* 相对于气泡容器左侧，现在定位正确了 */
  top: 15px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 15px solid rgb(27,29,81);
}

.typewriter-text {
  display: inline-block;
  overflow: hidden;
  letter-spacing: 2px;
  /* 用pre-wrap支持换行，同时保留空格 */
  white-space: pre-wrap;
  border-right: 4px solid orange;
  box-sizing: border-box;
}

问题2：打字机动画与文本换行冲突 #

CSS的steps()动画在处理多行文本时非常受限，尤其是动态内容（从SQL获取的文本），固定的steps(50, end)根本无法适配不同长度的文本。推荐用JavaScript实现打字机动画，既能完美支持换行，又能适配动态内容：

添加JavaScript代码 #

在</body>前插入这段JS，它会逐个字符添加文本，自动处理换行，还能适配动态加载的内容：

document.addEventListener('DOMContentLoaded', function() {
  const typewriterElements = document.querySelectorAll('.typewriter-text');
  
  typewriterElements.forEach(el => {
    // 保存原始文本，清空元素内容
    const text = el.textContent;
    el.textContent = '';
    
    let charIndex = 0;
    const typingSpeed = 50; // 每个字符的间隔时间（毫秒）
    
    const typeInterval = setInterval(() => {
      if (charIndex < text.length) {
        // 逐个添加字符
        el.textContent += text.charAt(charIndex);
        charIndex++;
      } else {
        // 打字完成后，移除光标
        clearInterval(typeInterval);
        el.style.borderRight = 'none';
      }
    }, typingSpeed);
  });
});

移除无效的CSS动画 #

原来的CSS动画可以删掉了，因为JS已经实现了打字效果：

/* 删掉这些CSS动画代码 */
/*
@-webkit-keyframes type { from { width: 0; } }
@keyframes typing { from { width: 0% } to { width: 100% } }
@keyframes blink { from, to { border-color: transparent } 50% { border-color: orange; } }
*/

完整修改后的代码 #

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="refresh" content="20">
  <style>
    #Heading { margin-bottom:0vh; margin-top:0vh; }
    #slide { position: relative; margin: 1vh; float: right; border: solid 1px black; }
    .h1 { font-family: calibri; font-style: normal; margin-top:0vh; margin-bottom:0vh; font-size: 7vh; }
    .h2 { font-family: calibri; font-style: normal; font-size: 4vh; margin-top: 0vh; margin-bottom: 0vh; }
    .p { font-family: calibri; font-style: normal; font-size: 4vh; margin-top: 0vh; margin-bottom: 0vh; }
    .comments { font-family: calibri; margin-top: 1vh; font-size: 4vh; width: 400px; }
    .comments .comment { font-family: calibri; margin-top:0vh; margin-left: 1.5vw; margin-bottom: 20px; font-size: 5vh; }
    .comments .comment p { margin: 0 0 10px 10px; }
    .bubble {
      position: relative;
      background: rgb(27,29,81);
      padding: 20px;
      color: white;
      border-radius: 2px;
      margin-left: 20px;
      width: 1175px;
      display: block;
    }
    .bubble::after {
      content: "";
      display: block;
      position: absolute;
      left: -15px;
      top: 15px;
      width:0;
      height:0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-right: 15px solid rgb(27,29,81);
    }
    .typewriter-text {
      display: inline-block;
      overflow: hidden;
      letter-spacing: 2px;
      white-space: pre-wrap;
      border-right: 4px solid orange;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div>
    <h1 class="h1">Arrears Support Unit</h1>
    <h2 class="h2">This is just a test</h2>
  </div>
  <div id="slide">
    <img src="Want_You.png" align="middle" style="max-width:100%;max-height:75%;">
  </div>
  <div class="comments">
    <p class="comment bubble"><span class="typewriter-text">Lorem ipsum et est... Lorem ipsum et est... Lorem ipsum et est... Lorem ipsum et est... Lorem ipsum et est... Lorem ipsum et est...</span></p>
  </div>
  <div class="comments">
    <p class="comment bubble"><span class="typewriter-text">Lorem ipsum et est... Lorem ipsum et est... Lorem ipsum et est...</span></p>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const typewriterElements = document.querySelectorAll('.typewriter-text');
      
      typewriterElements.forEach(el => {
        const text = el.textContent;
        el.textContent = '';
        
        let charIndex = 0;
        const typingSpeed = 50;
        
        const typeInterval = setInterval(() => {
          if (charIndex < text.length) {
            el.textContent += text.charAt(charIndex);
            charIndex++;
          } else {
            clearInterval(typeInterval);
            el.style.borderRight = 'none';
          }
        }, typingSpeed);
      });
    });
  </script>
</body>
</html>

适配动态文本的说明 #

等你从SQL获取文本后，只需要把动态内容赋值给.typewriter-text元素的textContent即可，JS会自动处理打字动画，完全不需要修改动画逻辑，完美适配任意长度和换行的文本。

内容的提问来源于stack exchange，提问作者GpioNelson