我无法控制的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>