Question

I have a table whose width is fixed. Its ‘tbody’ is generated from an ajax response.

I have an example of what I’m trying to do at http://jsfiddle.net/p5LL7/7/
Click on the button to simulate an ajax response.You will see that the second word i.e. “panther” breaks on to the next line. How do I make sure:

1. Spans which contain smaller words are displayed on the same line(like the second row of the table) BUT
2. Spans which contain longer words are displayed on the next line ?

Answer 1

Give the spans a css property of display: inline-block; and then they should just wrap automatically.

Lose the break-word property also.