网页金字塔显示异常求助（控制台显示正常）

你的代码在控制台能正常生成金字塔，但网页中展示不符合预期，核心问题是HTML对空白符的解析规则和控制台不同，加上非等宽字体导致对齐错乱，以下是具体修复方案：

关键修复点 #

• 保留空白符格式：HTML会自动合并多个空格、忽略换行符，需要让显示元素识别这些空白符
• 使用等宽字体：非等宽字体的空格和字符宽度不一致，会破坏金字塔的对称结构

修改后的代码 #

CSS 调整 #

给#viewport__display添加以下样式：

#viewport__display {
  width: 350px;
  height: 350px;
  border: 2px solid red;
  margin-left: 80px;
  margin-top: 30px;
  background-color: rgba(221, 221, 215, 0.902);
  /* 保留空格和换行的原始格式 */
  white-space: pre;
  /* 使用等宽字体保证对齐 */
  font-family: monospace;
  /* 可选：让金字塔居中显示 */
  text-align: center;
  padding: 10px;
  overflow: auto; /* 内容超出时显示滚动条 */
}

JavaScript 可选优化（二选一） #

如果不想修改CSS，也可以在输出时用<pre>标签包裹内容，<pre>标签默认会保留空白符和使用等宽字体：

genbtn.addEventListener("click", () => {
  wincon.innerHTML = `<pre>${output}</pre>`;
});

原问题原因说明 #

• 你尝试的flex布局是用于容器的元素排版，无法解决文本空白符的解析问题
• 直接用模板字符串插入内容时，HTML仍会按照自身规则处理空格和换行，导致格式丢失

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