html - Prevent white space from wrapping together with word -

the easiest way describe problem example: http://jsfiddle.net/trswg/1/

the first paragraph great, it's displayed how want to. no matter how white-space added first line, it's truncated , isn't wrapped second line.

the second paragraph problem lies. space preceding word "case" should not included on line, want stay on line above , act how in first paragraph.

the third paragraph fine, show want white-space preserved. it's worth noting don't want words broken (word-break: break-all).

i've attached screenshot below, in case it's rendering differently on browsers. i'm using chrome 28.0.1500.72 m:

you'll notice i'm using lettering.js plugin wrap every character inside span, required feature we're developing.

what i've learnt far:

it seems spans causing problem, if remove lettering call:

//$('p').lettering(); 

it works need it. somehow spans acting differently normal text.

update: html cannot manually edited either. it's created flash content management tool , saved other properties xml. there thousands of these xml documents. server has chance process xml before it's sent html front end, solution involving changing html need scripted.

edit

what in css:

p {     width: 160px;     white-space: pre-line;         font-family: arial;     font-size: 13px; } p:last-child {     white-space: pre-wrap;     }