Enabling word wrap

Question

I am trying to convert HTML to PDF with jsPDF. But since I want every word to in the exact location as in HTML, I wrapped every word in <span>s. Here I have a font tag (not generated by my code) containing a bunch of spans:

<font><span>Hello</span>&nbsp;<span>wrap</span>&nbsp;<span>....</font>

However when I do this it seems to break the default wordwrapping as you can see in here.

How can I fix this?

Answer 1

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.

Answer 2

You can also use:

style word-wrap: break-word;

.font{ word-wrap: break-word; } See this fiddle Fiddle