我无法控制的 HTML 中的 ASCII 艺术

Question

您好，我正在尝试在我无法控制的网站上添加一些 ASCII 艺术，我可以将文本写入他们的编辑器，然后将这些文本包裹起来，这使得添加 ASCII 艺术极其困难，首先我只能添加一个空格和一个换行符，所以我必须用“....”替换它，而对于背景，我必须使用像“@”或“#”这样的深色东西，但它会变得更糟，因为即使我全部替换它，它在网页上的编辑器很糟糕

在编辑器中看起来不错

但在网页上很糟糕，我知道它的断词：break-word；问题

now here is how their code looks like after it is displayed, I can not edit it     I can only add content between the div <div style="word-break: break-word;"></div> and no I cannot add pre <pre> tag as < and > get converted to &lt; and &gt; and "&" gets       converted to &amp; 

他们的代码：

<div style="word-break: break-word;">==== for some reason this shows fine ====<br>  
....#######...|.....##................|..........<br>
...##........##..|.....##................|..........<br>
...##..............|.....##................|..........<br>
...##...####...|.....##................|..........<br>
...##........##..|.....##................|..........<br>
...##........##..|.....##................|..........<br>
....#######...|.....#########..|..........<br>
<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*../@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@/.....@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@/......@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@,.......@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*........@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@..........@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@............@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@/...............@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@@@@@./*.................@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@@@@*.....................,@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@@,.......................&amp;@@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@@@.......................*@@@@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@/........................@@@@@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@..............@@@@...@...@@@@@@@@@@@@@@@@@@@@<br>
@@@@@@@*.........&amp;..........@@@@..,@/.*@@@@@@@@@@@@@@@@@@@@<br>
@@@@@@@@@*.....*,..........@@@@@..*@*.*@@@@@@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@*...@@/...(@@@@@@..,@@..,,@@@@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@@...@@@..*@@@@@@@...........*@@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@*..@@@@. (.(*................,@@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@..@@@./........................@@@@@@@@@@@@@@<br>
@@@@@@@@@@@@@@................................,(@@@@@@@@@@@<br>
@@@@@@@@@,.......................................@@@@@@@@@@<br>
@@@@@@,.........................................@@@@@@@@@@@</div>

那么有没有办法解决这个问题，也许有一个公式，我必须为浏览器添加多少 @ 才能不破坏这样的文本？因为出于某种原因，第一个 ascii 艺术在网页中看起来不错，但在编辑器中却很糟糕

感谢您的回答和最诚挚的问候

Answer 1

看来您需要使用等宽字体。

使用下面的 CSS 来解决它：

.monospaced {
    font-family: "Courier New", Courier, monospace; 
}

<div class="monospaced">
   Put your ASCII art here
</div>