This is because default display is inline. If you use inline-block
it will wrap as you expect:
See this jsfiddle
The only change is to the CSS:
span
{
display:inline-block;
}
You may want to create a new class for this (e.g. wordWrapSpan
) rather than changing default behaviour of span.