5/23/2014

[ExtJS] RowExpander doesn't show a whole long word

I have a RowExpander grid with a summary field which may contains a very long word. If there's no space between this word, RowExpander cannot show full word. For example, the summery field is '11111 222222 33333344444444444....555555555555'. But the number "5555.." doesn't present.

If a word is too long, I'd like to let the row expander break it a new line instead of hiding it.


Live Example
: RowExpander doesn't show a whole long word

To solve this issue, we can just add a attribute word-wrap:break-word; to x-grid-rowbody class like:

.x-grid-rowbody p {
 word-wrap: break-word;
}
Result:

Force a Long Line of Word (without spaces) to Line Break in ExtJS RowExpander

The solution is verified in ExtJS 4.1.1, 4.2, and 5.0.