Word Wrap In Firefox

I came across this problem in Firefox when I put a long link in my post. When there is a long link in your post, Firefox cannot display it properly. Firefox cannot wrap it within the content division and the link will flow out of the division or the last part of the link will not be visible in the post area. However this problem is not there in Microsoft Internet Explorer since word wrap is Microsoft proprietary extension to CSS which is introduced in IE 5.5.

Here the reason why I talk about link specifically is that there cannot be any spaces within a link, so we need word wrap here, that is not taken care in Firefox. When we write a normal paragraph, we usually put white spaces or spaces between each word, so we don’t need to consider the wrapping of word in normal paragraph. As i have said, in a link there is no space, so we need to add a simple code in our css. First, we have to put our link inside the CODE tag as shown below

<code>YourLinkHere</code>

I choose the CODE tag because we usually use this tag to include code within our post, so that the browser will not parsed the code inside the CODE tag and it will display as it is. The next thing is writing the css code, you have to add this css code in your css style.

code {
   display:block;
   font-size:14px;
   line-height:1.2em;
   overflow-x:auto;
   overflow-y:hidden;
}

This is how firefox will display it:

Now you have to put your long link inside the CODE tag everywhere you want to attach a link in your post. In Firefox, the link (only if it is too long) will now be within a block element that can be scrolled in x-direction. This code is effective only when the link is long enough to flow out of the boundary.

The next thing you need to do is to add one more css code for Internet Explorer. Without the above code, IE already wrap the text correctly and display it properly. But, since you have change the display style of your CODE tag, you need to give IE the default display style back. To do this add the css code below and this css will work only if our website is viewed in Internet Explorer (you have to add the if condition).

<!--[if IE]>
<style type="text/css">
   .post-body code {
   display:inline;
   word-wrap: break-word;
}
</style>
<![endif]-->

This is how Internet explorer will display it:

Now, this css will override the previous css written for Firefox if Internet Explorer is used, and IE will get its default word wrap property again.

Leave a Reply