How can I allow text to wrap inside a word if necessary?

Question

I am looking for the best solution to allow text to wrap in the middle of a word if necessary. By best, I mean most browser-compatible, and will favor word breaks before it

Answer 1

My answer from another instance of this question, found at Wrapping long text in CSS :

I use the combination

word-wrap: break-word;
overflow: hidden;

to deal with this. The word-wrap setting will allow the word to be wrapped despite its length in browsers which support that property, while the overflow setting will cause it to be cut off at the end of the available space in browsers which don't recognize word-wrap. That's about as graceful of degradation as you're likely to get without going to javascript.

Answer 2

I found a similar answer here: http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

A more robust browser support

CSS only

-ms-word-break: break-all;

     /* Be VERY careful with this, breaks normal words wh_erever */
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

If your text is PHP generated you have a PHP function:

wordwrap

<?php
  $text = "The quick brown fox jumped over the lazy dog.";
  $newtext = wordwrap($text, 20, "<br />\n");

  echo $newtext;
?>

Also, you can try PHP function explode if you have and know the delimiter. Display after with for loop (explode returns an array).