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.

Advertisements