Why won't my text display the same in html as javascript?-CodePudding

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");

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

<!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 >

    </div>
</body>

</html>

In javascript the characters are displayed as expected however in html they become misaligned and I don't know why. Expected Output

Output Received

I tried replacing the blank spaces with Unicode characters but it was too tedious. Any guidance would be appreciated.

CodePudding user response：

Just wrap the .wrapper with a <pre> tag.

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

let Text = function (s) {
    let M = {
        "M": [
            "███╗   ███╗",
            "████╗ ████║",
            "██╔████╔██║",
            "██║╚██╔╝██║",
            "██║ ╚═╝ ██║",
            "╚═╝     ╚═╝",
            ]
    }
    for (let i = 0; i < s.length; i  ) {
        let currentChar = M[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");

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

<!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>
    <pre>
        <div ></div>
    </pre>
</body>

</html>