Question

I have a div, which consists of words with different styles applied to text segments.

I am trying to implement a layout such that if the text exceeds the width of the div, it should go over to the next line.
Basically: No word break
Also, the key here is to make sure that a word never breaks, if the whole word can’t fit inside the div horizontally, it should move over to the next line.

We can assume that the width is atleast more than the width of the longest word.

http://jsfiddle.net/cH5tN/15/

Answer 1

You should do two things. Use the css property 'white-space: no wrap' and nest the stylized letters within a single span. Here’s the updated fiddle http://jsfiddle.net/cH5tN/44/

EDIT:

Also, you should avoid non-breaking spaces, just use a space unless there’s a specific reason you wouldn’t want the text to break on a particular space.