html - ASCII 艺术在实时网页上折叠答案

【问题标题】：html - ASCII art collapses on a live webpagehtml - ASCII 艺术在实时网页上折叠
【发布时间】：2018-03-24 13:00:15
【问题描述】：

我正在尝试在我正在进行的网站上包含某种形式的 ASCII 艺术；艺术在编辑器中看起来不错（使用 VScode 和 Sublime Text 测试），但在网站本身上却没有。

我尝试将其放入 div 并使用 Roboto Mono 对其进行样式设置，并且在 R(oboto) Mono 之后，我决定单独尝试 monospace。没有区别，只是外观略有变化。
我还尝试将\ 放在另一个\ 之前，正如我在这里看到的另一个问题中所述，结果与上次发生的情况没有任何不同。

我该如何解决这个问题？

代码：
The ASCII that I'm trying to display is within the house div

【问题讨论】：

虽然使用whitespace: pre; 可以解决您的问题，但我强烈建议不要发布“正在建设中”页面，因为它们在九十年代和两千年代初期几乎是毫无意义的人工制品。一篇相关文章：smashingmagazine.com/2009/11/designing-coming-soon-pages
将您的原始 ASCII 艺术以纯文本形式添加到问题中，以便其他人可以复制您所看到的内容。坦率地说，您的文字图像在这里完全没有价值。

标签： html ascii

【解决方案1】：

你试过使用<pre>标签吗？

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

您应该能够获得 ASCII 艺术...

<pre>
   _    __   ___  _____ _____     _        _       ___       _ _           _   _             
  /_\  / _\ / __\ \_   \\_   \   /_\  _ __| |_    / __\ ___ | | | ___  ___| |_(_) ___  _ __  
 //_\\ \ \ / /     / /\/ / /\/  //_\\| '__| __|  / /   / _ \| | |/ _ \/ __| __| |/ _ \| '_ \ 
/  _  \_\ | /___/\/ /_/\/ /_   /  _  \ |  | |_  / /___| (_) | | |  __/ (__| |_| | (_) | | | |
\_/ \_/\__|____/\____/\____/   \_/ \_/_|   \__| \____/ \___/|_|_|\___|\___|\__|_|\___/|_| |_|
</pre>

【讨论】：

【解决方案2】：

试试这个：

.ascii-art {
    font-family: monospace;
    white-space: pre;
}

<div class="ascii-art">             .,-:;//;:=,
         . :H@@@MM@M#H/.,+%;,
      ,/X+ +M@@M@MM%=,-%HMMM@X/,
     -+@MM; $M@@MH+-,;XMMMM@MMMM@+-
    ;@M@@M- XM@X;. -+XXXXXHHH@M@M#@/.
  ,%MM@@MH ,@%=            .---=-=:=,.
  -@#@@@MX .,              -%HX$$%%%+;
 =-./@M@M$                  .;@MMMM@MM:
 X@/ -$MM/                    .+MM@@@M$
,@M@H: :@:                    . -X#@@@@-
,@@@MMX, .                    /H- ;@M@M=
.H@@@@M@+,                    %MM+..%#$.
 /MMMM@MMH/.                  XM@MH; -;
  /%+%$XHH@$=              , .H@@@@MX,
   .=--------.           -%H.,@@@@@MX,
   .%MM@@@HHHXX$$$%+- .:$MMX -M@@MM%.
     =XMMM@MM@MM#H;,-+HMM@M+ /MMMX=
       =%@M@M#@$-.=$@MM@@@M; %M%=
         ,:+$+-,/H#MMMMMMM@- -,
               =++%%%%+/:-.
               </div>

【讨论】：