Искусство ASCII в HTML я не контролирую - PullRequest
Новая
       50

Искусство ASCII в HTML я не контролирую

0 голосов
/ 26 октября 2019

Привет! Я пытаюсь добавить некоторые ASCII-изображения на сайт, который я не контролирую, я могу написать текст в их редактор, а затем этот текст обернуть, что делает добавление ASCII-изображений чрезвычайно сложным, сначала я могу добавить только один пробели один разрыв строки, поэтому я должен заменить это на «....», а для фона я должен использовать что-то темное, например «@» или «#», но это ухудшается, потому что даже если я заменю все это, то вредактор ужасный на веб-странице

В редакторе он выглядит прекрасно enter image description here

, но ужасен на веб-странице, и я знаю его словосочетание: break-word;проблема enter image description here 

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 art выглядит хорошо на веб-странице, но ужасен в редакторе

Спасибо за Anwsering и С наилучшими пожеланиями

1 Ответ

0 голосов
/ 26 октября 2019

Похоже, вам нужно использовать моноширинный шрифт.

Используйте следующий CSS для его решения: 

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

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