prevent a long line enclosed with pre tag from overflowing

Issue

I have a long single line of text enclosed with <pre> </pre> tags.

Is there any way to wrap the line or do I need to add <br> into the line of text?

Solution

There is a CSS property called white-space: pre-wrap;, it inserts newline characters when necessary while it preserves sequences of white spaces. See:

.box {
  width: 200px;
  background-color: red;
}

.text {
  white-space: pre-wrap;
}

<div class="box">
  <pre class="text">This is a very long line indeed. Way to long for this little box</pre>
</div>

Answered By - KIKO Software