How make long words and URLs wrap

I had a very long URL to display and I could not make it wrap. If you search this issue you will find lots of advice but it took me a long time to find a solution that worked for me.

In the end I had to make a class and apply it to a <pre class=”wordWrap400″> tag as shown.

.wordWrap400{
 white-space:normal;
 width: 400px; /* this sets the width*/
 word-wrap: break-word;
 -ms-word-break: break-all;
 /* Be VERY careful with this, breaks normal words wh_erever */
 word-break: break-all;
 /* Non standard for webkit */
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 hyphens: auto;
 font-size: 14px;
 color: red;
}

In my particular scenario – using it with Isomorphic Smartclient framework I only got a working solution in Chrome, Firefox did not work (IE not tested). I think that this may be to do with the way that Firefox processes content that is in table cells.

Follow

Get every new post delivered to your Inbox.

Join 68 other followers