HTML中的ASCII艺术我无法控制

Question

嗨，我正试图在一个我不能控制的网站上添加一些ASCII艺术，我可以将文本写到他们的编辑器中，然后这个文本被包裹起来，这使得添加ASCII艺术变得非常困难，首先我只能添加一个空格和一个换行符，所以我必须用"....“替换它。我不得不使用诸如"@“或"#”之类的深色作为背景，但情况会变得更糟，因为即使我将其全部替换掉，它在编辑器中看起来也很好，而在网页上却很糟糕

它在编辑器中看起来很好

​

但在网页上很糟糕，我知道它的单词-break

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图片在网页上看起来很好，但在编辑器中却很糟糕。

感谢Anwsering和最好的问候

Answer 1

看起来你需要使用等宽字体。

使用以下CSS来解决这个问题：

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

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