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

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:

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

inline-block on your spans is what you want. – Barry Chapman Feb 08 '12 at 09:05 — Barry Chapman, Feb 08 '12 at 09:05

score 1 · Answer 1 · answered Feb 08 '12 at 08:56

1

.mngAppSpan{
  float:left;
  ..
  .
}

answered Feb 08 '12 at 08:56

mgraph

15,238
4
41
75

score 1 · Accepted Answer · answered Feb 08 '12 at 08:57

1

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

Lose the break-word property also.

answered Feb 08 '12 at 08:57

Barry Chapman

6,690
3
36
64

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

2 Answers2