Doing things the hard way and overflow-wrap

Last night I posted a script for GIMP. Naturally, I'd want syntax highlighting and no word wrapping, so I used the pre tag along with prettify. Posted it and was quite happy. Then I check it in Opera and I find the text had wrapped. I couldn't figure out why, I know pre should keep text from wrapping and Opera doesn't wrap other pre tags. I thought I was going insane! I spent an hour looking into it, but just couldn't figure it out. Everywhere else using overflow: auto, Opera would properly add the scroll wheel and not wrap pres. I couldn't find anything in my CSS that would be causing pre to wrap. Even explicitly told it to treat the content like pre, and it still wrapped.

Finally I took a look at the computed stylesheet thanks to Opera Dragonfly. I really should have done this from the beginning. I don't know why I didn't. I found a CSS property I've never heard of before: overflow-wrap. It was set to break-word. I had never heard of it before. I'm no web designer, so there's plenty of CSS I'm unfamiliar with. Naturally I Googled it and found it's a new tag to replace word-wrap (word wrap remains for legacy reasons) I still don't know where it came from; I'll look into that later today if I get the chance. In the end I spent about an hour looking for something that would have been much easier to find if I went about it the right way, and it was a simple fix: all I had to do was put overflow: normal; to my css and it all worked properly.

Why all this effort for Opera? Well, Opera is my browser of choice, so I naturally want my blog to work perfectly in it. I test my site in Opera and Firefox. I'll probably install Chrome to make sure it works fine in there too, but for now just Opera and Firefox. IE I don't bother with, but last night I took a look at it and it too was wrapping because of overflow-wrap. It makes me wonder why Firefox wasn't wrapping due to overflow-wrap. I wonder if Firefox is doing some things different with CSS3...

Anyway, in conclusion, it's amazing how simple something is when you look at what actually is being done and use logic :P Though I'm still having a bit of trouble getting alternating line colors to work with prettyprint when using scroll overflow.