Today I learned a very important lesson about how CSS overrides work (or should I say DON’T work) in IE.
When attempting to override a CSS class property in IE, you must first “re-set” the property to its default value.
This is demonstrated in the following code:
<style>
.textBlock {
white-space: nowrap;
}
/* the following is required for IE;
otherwise IE will ignore the white-space declaration in the next block.
*/
.textBlock {
white-space: normal;
}
.textBlock {
white-space: pre-wrap !important;
word-wrap: break-word;
}
</style>
You can see this in action here.
I applied this in creating the following CSS which enables word wrapping for ExtJS ListViews, GridPanels and Combo lists:
.x-list-body dt {white-space: normal;}
.x-list-body dt em { white-space: pre-wrap !important; word-wrap: break-word !important;}
.x-grid3-cell-inner, .x-grid3-hd-inner{ white-space: normal; }
.x-grid3-cell-inner { white-space: pre-wrap !important; word-wrap: break-word !important;}
.x-combo-list-inner .x-combo-list-item { white-space: normal; }
.x-combo-list-item { white-space: pre-wrap !important; word-wrap: break-word !important;}