Search code examples
jqueryhtmlhtml-tablefixed-width

How do make sure longer "spans" go to a new line in a table having fixed width?

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 ?
Solution

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

    Lose the break-word property also.