为何HTML中输出的文本与JavaScript中的显示效果不一致？

问题描述 #

我编写了一段JavaScript代码用于生成方块艺术字，在JavaScript环境中字符显示对齐正常，但放到HTML页面中呈现时出现错位。曾尝试用Unicode字符替换空格，但操作过于繁琐，希望得到解决该对齐问题的指导。

相关代码 #

JavaScript代码 #

let wrapper = document.querySelector(".wrapper");

let Text = function (s) {
    let Text = {
        "M": [
            "███╗   ███╗",
            "████╗ ████║",
            "██╔████╔██║",
            "██║╚██╔╝██║",
            "██║ ╚═╝ ██║",
            "╚═╝     ╚═╝",
            ]
    }
    for (let i = 0; i < s.length; i++) {
        let currentChar = Text[s.charAt(i)];
        currentChar.forEach(element => {
            let span = document.createElement("span");
            let spanContent = document.createTextNode(element);
            span.appendChild(spanContent);
            wrapper.appendChild(span);
            currentChar = Text[s.charAt(i) + 1];
        });
    }

}

Text("M");

CSS代码 #

span::before {
    content: "\a";
    white-space: pre;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="wrapper">

    </div>
</body>

</html>

效果对比 #

• 预期效果：方块组成的字母M上下行完全对齐，每个字符和空格的位置一一对应，呈现标准的方块艺术字轮廓。
• 实际效果：各行的方块与空格错位，字母M的轮廓变形，无法正常显示。

解决方案 #

错位的核心原因是浏览器默认字体为非等宽字体，普通字体中不同字符（包括空格）的宽度不一致，导致对齐失效。无需替换空格，直接通过CSS设置等宽字体即可解决：

调整后的CSS #

.wrapper {
    font-family: monospace; /* 设置等宽字体，保证所有字符宽度一致 */
}

span::before {
    content: "\a";
    white-space: pre;
}

额外优化（可选） #

如果想简化代码，也可以将每行内容直接拼接成带换行的字符串，一次性插入DOM，同时通过CSS保留换行格式：

修改后的JavaScript：

let wrapper = document.querySelector(".wrapper");

let Text = function (s) {
    let Text = {
        "M": [
            "███╗   ███╗",
            "████╗ ████║",
            "██╔████╔██║",
            "██║╚██╔╝██║",
            "██║ ╚═╝ ██║",
            "╚═╝     ╚═╝",
            ]
    }
    for (let i = 0; i < s.length; i++) {
        let currentChar = Text[s.charAt(i)];
        // 将所有行拼接成带换行的字符串，一次性插入
        wrapper.textContent += currentChar.join('\n');
    }
}

Text("M");

对应的CSS：

.wrapper {
    font-family: monospace;
    white-space: pre; /* 保留文本中的换行和空格格式 */
}

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