APEX report text wrap - Theme 25 page with container template

How to wrap columns and words in your report?

Another alternative

I know what you are all thinking I have done and seen this before. Exactly what I thought, there are so many post of doing this and I have done it so many times. Well I was wrong. 

the first thing that came to my mind was apply css formatting ans you should be fine.

Standard CSS:

{  width:500px; display:block; white-space:normal; }

But for some reason this did not work on report in Theme 25 with container page template. Report text was still getting out of column borders and it would not be wrapped.

Solution that I implemented:

1. Change report CSS column properties to include new class name

2. Created CSS on Page level
.wrap_text {
    word-break: break-all !important;
}
3. Added Javascript on Page Load

//LOOP through each element that needs wrapping and add <p> element to make this work
$(".wrap_text").each(function(index) {
    $(this).html("<p>" + $(this).text() + "</p>");
});

And that was it. 
Thanks,
SL