Organizing <pre> Tag Layout

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>

Solution

Instead of white-space: normal;, use white-space: pre-line;. This allows runs of white-space to be combined within a line, but doesn't allow lines to be merged. This will merge all the leading spaces on each line into a single 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>

There's no way to totally ignore all the white-space at the beginning of each line. See MDN for descriptions of all the white-space styles.