基于AJAX加载TXT内容到DIV 实现边界约束与逐字打字动画效果

一、内容边界约束配置 #

针对“内容超出DIV边界”的问题，通过CSS规则完成容器约束，同时适配纯文本的换行展示规则，不需要修改现有HTML结构，仅新增以下样式即可：

/* 适配全高1/4宽度区块的约束规则 */
.col-lg-4 {
  height: 100vh; /* 实现全高展示效果 */
  overflow: hidden; /* 阻断子元素溢出区块边界 */
  padding: 1rem; /* 可自定义内边距调整展示间距 */
}
#code {
  width: 100%;
  height: 100%;
  /* 核心文本约束规则 */
  white-space: pre-wrap; /* 保留txt文件中的原生换行，避免文本挤成单段 */
  word-break: break-word; /* 长文本自动折行，不会撑破容器宽度 */
  overflow-y: auto; /* 内容超出容器高度时，在容器内部生成滚动条，完全限制在区块范围内 */
  /* 以下为可自定义的文本样式，支持按需调整 */
  font-family: monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}

规则说明：如果不需要保留滚动条，可将#code的overflow-y属性修改为hidden，内容打满容器后就会停止展示溢出部分，完全适配纯视觉展示的需求。相比原来的.html()方法，后续渲染环节使用.text()写入内容，可以避免txt文件中的特殊代码符号被解析为HTML标签，从根源上避免内容排版错乱的问题，和pre-wrap样式配合可以完美还原txt文件的原生排版。

二、逐字符打字机效果实现 #

针对“逐字符展示模拟打字效果”的需求，仅需修改现有AJAX成功回调的逻辑，不需要额外引入第三方插件，修改后的完整JS代码如下：

jQuery(document).ready(function() {
  jQuery.ajax({
    url : "code.txt",
    dataType: "text",
    success : function (fullText) {
      // 打字机效果参数配置
      let charIndex = 0; // 记录当前已输出的字符位置
      const typeInterval = 20; // 单字符输出间隔，单位毫秒，数值越小打字速度越快
      const $codeBox = jQuery("#code");
      // 启动逐字符输出定时器
      const typeTimer = setInterval(() => {
        // 截取从开头到当前位置的字符写入容器
        $codeBox.text(fullText.slice(0, charIndex + 1));
        charIndex++;
        // 所有字符输出完成后清除定时器
        if (charIndex >= fullText.length) {
          clearInterval(typeTimer);
        }
        // 自动将滚动位置拉到最底部，保证最新输出的字符在可视范围内
        $codeBox.scrollTop($codeBox[0].scrollHeight);
      }, typeInterval);
    }
  });
});

效果说明：配置完成后，AJAX加载完成txt内容后，就会以设定的速度逐字符输出，自动保留txt内的换行规则，所有内容始终被约束在目标DIV的边界范围内，支持通过CSS自由调整文本的字体、颜色、间距等样式。

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