Wrapping long text in CSS [duplicate]

Answer 1

According to http://www.w3.org/TR/css3-text/#word-break0

word-break: break-all;

...does not do the same as word-wrap (which is now renamed to overflow-wrap) because even small words may be broken when they are at the end of the line. But it works.

In some rare cases hyphen: auto; may bring you better results, but only if your long word is included in a dictionary the browser uses.

Answer 2

A new answer, since you've changed your question:

This is a very simplistic PHP solution:

<?php
$string = "AnExtremelyLongStringWithoutWhitespacesOrBreakpointsOfAnyKindThatWillCompletelyAndUtterlyRuinYourWebsiteDesign";
for($i=0; $i<strlen($string); $i++) {
  $newString .= $string[$i] . '&shy;';
}
echo $newString;

The same can be achieved in any language ofcourse.

Answer 3

You have to resort to JavaScript and use a function like this:

<script language="javascript">
function wrap() {
    var data = document.getElementsByTagName('yourtaghere'); 
    var  desiredLength = 40 ;
    var delimiter = "<br />";
    for( var i=0; i < data.length; ++i ) {
        cellLength=data[i].innerHTML.length
        if( desiredLength < cellLength ) {
            var counter=0;
            var output="";
            while( counter < cellLength ) {
                output += data[i].innerHTML.substr(counter,desiredLength) + delimiter;
                counter+= desiredLength;
            }
            data[i].innerHTML=output;
        }
    }
}
window.onload=wrap;
</script>

Or you could use the hyphenator