Word Wrap Hack In Design Time For FireFox....No Choice For Now With CSS!

Here are couple of live examples showing FF out of control with word wrap when I came across in blogs/sites(I will continue to update this when I encounter others):
Updated: 9-18-07





Ok, this isn't to take anything away from how nice FireFox(FF) browser really is, but can someone from that community solve the issue of word wrap for CSS in FF browser?
I notice this issue while designing ITskyline Blog and thought that someone out there doing the same with their web sites/blogs will like to know about it. If you have done some CSS, you should know that manipulating word wrap in CSS isn't some walk in the park task. you would try to come up with ways to handle word wrapping capabilities while CSS standards committe still neglect to come up with one standard for word wrap across different platforms.


Yes, there are certain forcible ways to enforce this overflow text never happen in typing by hard coded with white space characters. But this is reactive and repetitive steps that FF or CSS standard can resolve for designers whom are facing this ever grown issue due to huge encounter with long url and codes in the blog posts or html documents. All and all, CSS and FF should do something now before IE took over the world again! Right now IE is more appealing to me again ;)

IE(Internet Explorer) communities had answered this issue of CSS by designed its own CSS non-standard properties on handling word wrap into IE. So when you like to have word wrap implementing into your HTML/XHTML with CSS, now you can! By using IE's CSS property: {word-wrap: break-word;} to handle long unspacing word or URL and {overflow:hidden;} or {overflow:auto;} to handle large image that require scrolling or it will goes off the DIV or bound of container element hidden.

Then, with FF, it is out of luck so far with word wrap. But you like to have it your way and force FF to handle word wrap, it requires few steps and it isn't the perfect solution, just a hack for now.

Lets see what the problem is in Fire Fox Browser before we do something about it, below is the JavaScript source code in html, notice that code section document.guideform.guidelinks.selectedIndex].value>" where the part after document.guideform.guidelinks is "behind" the side bar. As you can see below...
<FORM name="guideform">
<SELECT name="guidelinks" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value"> <option value=""/>default name for drop down item
<option value="type the desired URL when selected"/>name of your drop down item
</SELECT>
</FORM>

Now, here come the hack by the fellow Brazilian(El Micox) using JavaScript to word-wrap in elements. To implement word wrap feature into your web page with FF, just follow these 3 steps:

1. Get the script in http://naironjcg.googlepages.com/micoxWordWrap.js (4kb)

2. Call this script in your html document:

3. Put class name 'word-wrap' in elements (or parents of this element) that you wanna break words. Example:

For complete details follow thru to El Micox's Script word-wrap to Firefox - updated version and thanks El Micox for quick fix on known FF issue on CSS word wrap!
Now lets see his work in action with the same JavaScript code from above and this time apply the step 3 with class name "word-wrap" inside the p element which you can't see:

<FORM name="guideform">
<SELECT name="guidelinks" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value"> <option value=""/>default name for drop down item
<option value="type the desired URL when selected"/>name of your drop down item
</SELECT>
</FORM>

Now, the long code section didn't got hidden by the side bar and instead contain inside the post border which the script automatically transform excessive unspacing line into the next line! Viola, good hack...
It is just sad that FF(Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.5 Gecko/20070713 Firefox/2.0.0.5) still neglect to resolve this known issue with CSS for word wrap!
Notice: El Malicox's JavaScript hack actually insert a white space to break the long line, so when you copy and paste the line, the breaking place actually is spaced out! This still not a great hack but at lease you can see the long unbreaking line in organized fashion inside the posts and not go wonder off to the sidebar. I will try to come up with better hack on this FF's CSS word wrap issue.

If you really like to use CSS with no word wrap, you can use overflow: auto property, so that when the line continue to go off the border, scroll enable until the next line space.
or you can use iframe with scrolling='yes'
But with this, it won't be as organize and easy to read, JMO!