组织 <pre> 标签布局

Question

我正在尝试让预标记在换行符处断开，就像我显示它的方式一样。相反，它把 vv 部分放在第一位，而不是在评论评论部分的中间打断，等等。是否有一些 CSS 可能对此有帮助？

.testingZone {
  margin-left: 20px;
}
.testingZone a {
  color: blue;
}
.testingZone a:hover {
  color: gold;
}
.testingZone pre {
  font-family: monospace;
  white-space: normal;
}

<div class="testingZone">
  <pre>
          &lt;!-- Note: comment comment comment.
          Comment Comment/Comment, more comments "comment"--&gt;
          &lt;vv:aaa vv:bbb="sss" vv:ccc="SectionA;SectionB;SectionC=SectionD;SectionE=SectionF.SectionG.SectionH;,SectionI=SectionJ;SectionK=SectionL;SectionM=SectionN;SectionO=SectionP.SectionQ.SectionR;SectionS=/;"/&gt;
          &lt;vv:aaa vv:bbb="iii" vv:ccc="\SectionT\SectionU\_SectionV,\SectionW\SectionX,\SectionY\_SectionZ"/&gt;
        </pre>
</div>

Answer 1

而不是 white-space: normal;，使用 white-space: pre-line;。这允许将 white-space 的运行组合在一行中，但不允许合并行。这会将每行的所有前导 space 合并为一个 space.

.testingZone {
  margin-left: 20px;
}
.testingZone pre {
  font-family: monospace;
  white-space: pre-line;
}

<div class="testingZone">
  <pre>
          &lt;!-- Note: comment comment comment.
          Comment Comment/Comment, more comments "comment"--&gt;
          &lt;vv:aaa vv:bbb="sss" vv:ccc="SectionA;SectionB;SectionC=SectionD;SectionE=SectionF.SectionG.SectionH;,SectionI=SectionJ;SectionK=SectionL;SectionM=SectionN;SectionO=SectionP.SectionQ.SectionR;SectionS=/;"/&gt;
          &lt;vv:aaa vv:bbb="iii" vv:ccc="\SectionT\SectionU\_SectionV,\SectionW\SectionX,\SectionY\_SectionZ"/&gt;
    </pre>
</div>

没有办法完全忽略每行开头的所有白色-space。有关所有 white-space 样式的说明，请参阅 MDN。

Answer 2

您需要删除 .testingZone pre 标签上的 white-space 规则或将其设置为

 标签的默认值，即 'pre'.

所以基本上：改变

.testingZone pre {
    font-family: monospace;
    white-space: normal;
}


到

.testingZone pre {
    font-family: monospace;
}


或到

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

组织 <pre> 标签布局

Organizing <pre> Tag Layout

html

javascript

css

jquery

pre