Alter your css for the span to show white spaces, just like in the <pre> tag.
Take a look at the different white-space options
span {
background-color: black;
white-space:pre;
}
From the mentioned resource here is a nice table what the different options for white-space will do:
New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
pre Preserve Preserve No wrap
nowrap Collapse Collapse No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap
If you add a to your span, the string will not break anymore on your space but instead ‘glue’ the two parts together, without wrapping the string on the space.