css 要为列0启动的预处理

j2qf4p5b 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(137)

下面的代码片段将创建一个预格式化的。但问题是，当你在许多标签中有一个<pre>时，跳到许多列后显示的文本会变得很难看：

<body>
     <main>
      ... // many other tags
           <pre>
            <code>
              # include <iostream>
              using namespace std;

              int main()
              { 
                  if(true)
                  {
                     return 1;
                  }
                  return 0; 
              }
            </code>
           </pre>
     </main>
    </body>

我希望预先格式化的文本显示在列0，而不将代码元素缩进到行0：

<body>
 <main>
  ... // many other tags
       <pre>
<code>
  ... content
</code>
       </pre>
 </main>
</body>

这是可能的。谢谢。

css

来源：https://stackoverflow.com/questions/76106312/pre-to-start-for-column-0

2条答案

按热度按时间

hgtggwj01#

但看看我能不能帮你解决问题

pre {
    margin: 0;
    padding: 0;
  }
  code {
    display: block;
    white-space: pre;
    margin: 0;
    padding: 0;
  }

<body>
  <main>
    ... // many other tags
    <pre>
      <code>
        ... content
      </code>
    </pre>
  </main>
</body>

赞(0）回复(0）举报 2023-05-02

ccrfmcuu2#

在pre标记上添加样式不足以实现正确的输出，因此我添加了一个脚本。

之前

<main>
... // many other tags
     <pre>
        <code>
          ... content
        </code>
     </pre>
</main>

After*（Edited）* -〉CSS（not as expected）

pre, code {
    white-space: pre-line;
}

<main>
   ... // many other tags
      <pre>
         <code>
            # include <iostream>
            using namespace std;
   
            int main()
            { return 0; }
         </code>
      </pre>
</main>

在2*（新）* -〉JS（工作！）

(function() {
    function preCode(selector) {
        var els = Array.prototype.slice.call(document.querySelectorAll(selector), 0);

        els.forEach(function(el) {
            var txt = el.textContent
                .replace(/^[\r\n]+/, "")    // strip leading newline
                .replace(/\s+$/g, "");      // strip trailing whitespace

            if (/^\S/gm.test(txt)) {
                el.textContent = txt;
                return;
            }

            var mat, str, re = /^[\t ]+/gm, len, min = 1e3;

            while (mat = re.exec(txt)) {
                len = mat[0].length;

                if (len < min) {
                    min = len;
                    str = mat[0];
                }
            }

            if (min == 1e3)
                return;

            el.textContent = txt.replace(new RegExp("^" + str, 'gm'), "");
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        preCode("pre code, textarea");
    }, false);
})();

body{
   color: gray;
}
pre{
   color: black;
}

<main>
   ... // many other tags<br>
      ...//other tags<br>
         ...//another tags<br>
            ...//this is tag too<br>
               ...//too many tags<br>
                  <pre><code>
                     # include <iostream>
                     using namespace std;
                     int main()
                     { 
                        if(true)
                        {
                           if(false)
                           {
                              if(true)
                              {
                                 return 1;
                              }
                           }
                        }
                        return 0; 
                     }
                  </code></pre>
               ...//end of tag 5<br>
            ...//end of tag 4<br>
         ...//end of tag 3<br>
      ...//end of tag 2<br>
   ...//end of tag 1<br>
</main>

赞(0）回复(0）举报 2023-05-02

我来回答

css 要为列0启动的预处理

2条答案

相关问题

热门标签

最新问答