Question

I am trying to get the pre tag to break on the line breaks like how I have it displayed. Instead its putting the vv section on the first, not breaking in the middle of the comments comment section, etc. Is there some CSS for this that might be helpful?

.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;。这允许将空白行的运行组合在一行中，但不允许合并行。这会将每行的所有前导空格合并为一个空格。

.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>

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

Answer 2

您需要删除.testingZone预标记上的空格规则，或将其设置为＆lt; pre＆gt;的默认值。标签，这是＆＃39; pre＆＃39;。

所以基本上：改变

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

到

.testingZone pre {
    font-family: monospace;
}

或

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

组织<pre> Tag Layout

2 个答案: