Wrapping a listing containing formatted spans

Question

I have an HTML <listing> tag which contains may <span> tags with color CSS styling, generated by Ruby's Rouge syntax highlighting engine. A <listing> is used because the markup contains whitespace which must be rendered.

I'm having trouble getting the text to wrap correctly though. I want to apply word-wrap: normal; overflow-wrap: break-word; wrapping to the entire <listing>, but it seems to just ignore these preferences, and the text spills over the sides.

<listing style="width: 200px; height: 200px; word-wrap: normal; overflow-wrap: break-word; background-color: #eee;">
<span style="color: #444"># This is a comment, but it's too long.</span>
<span style="color: blue">public</span> <span style="color: blue">class</span> <span style="color: black">Empty {
    <span style="color: #444"># This is indented using markup.</span>
    <span style="color: red">A.Long.Chain.Of.Accessors.And.Other.Calls()</span>
<span style="color: black">}</span>
</listing>

This is how the HTML appears on my browser (Firefox):

This is the result I'm after:

I've tried applying the formatting rules to the span tags too, but this didn't make any difference.

How should I fix the wrapping?

Answer 1

listing tag has by default white-space:pre...Try to change it to pre-wrap

Note

<listing> tag is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

listing {
  white-space: pre-wrap;
}

<listing style="width: 200px; height: 200px; word-wrap: normal; overflow-wrap: break-word; background-color: #eee;">
  <span style="color: #444"># This is a comment, but it's too long.</span>
  <span style="color: blue">public</span> <span style="color: blue">class</span> <span style="color: black">Empty {
    <span style="color: #444"># This is indented using markup.</span>
  <span style="color: red">A.Long.Chain.Of.Accessors.And.Other.Calls()</span>
  <span style="color: black">}</span>
</listing>