Question

I have an issue where I have span elements that are absolutely positioned (they are call-outs). They are typically a single line, but sometimes need to wrap. That works fine. I set a width and they automatically wrap. Unless they are within a pre element.

Here’s a jsfiddle showing the above. I’ve tried changing the display to block or inline-block. I’ve tried setting word-wrap to break-word. Nothing seems to work.

I can try changing the span to a div, I guess semantically that makes sense too… but that requires a lot more time than I have now to deal with through my app.

I’m perfectly happy with an html5 or css3 solution that only works on the latest browsers.

Answer 1

you just need to add following to your CSS

pre{
  white-space:pre-wrap;
}