Wrapping long text in CSS [duplicate]

Question

I have text like

<div style="float:left; width: 250px"> PellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesque  feugiat tempor elit. 
Ut mollis lacinia quam. Sed pharetra, augue aliquam   ornare vestibulum, metus massalaoreet tellus, eget iaculis lacus ipsum et diam. </div>

I do not want horizontal scrolling. Is it possible to wrap the text (auto-line break). I know there are some IE specific properties.

Thank you for your time.

UPDATE: I can use jQuery, Javascript, PHP to do this also. but how? I mean the letters (font) are not fixed width or whatever you call that.

Answer 1

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

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 3

In extension to the answer of Duroth, you can use the following php code to insert the shy-hyphens

$longest_length = 15;

$string_with_long_word = 'short lonngerrrrr lonnnnnnnggeeeeeeeeeeeeeeeeeessssssssssssssssstttttttttttttt and another looooooooooooonnnnnnnnngwwooooooooororoooorrrrrd';
$string = preg_replace_callback("/[a-z0-9]{{$longest_length},}/", 'putShyHyphen', $string_with_long_word);

function putShyHyphen($matches) {
 $string = $matches[0];
 $newstring = '';
 for ($i=0; $i<strlen($string); $i++) {
  $newstring .= $string[$i] . '&shy;';
 }

 return $newstring;
}
echo $string_with_long_word . '<hr />';
echo $string;

Answer 4

simple css. Try this: Put your text in < pre>...< /pre>

css rule

pre {
   overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
   white-space: pre-wrap; /* css-3 */
   white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
   white-space: -pre-wrap; /* Opera 4-6 */
   white-space: -o-pre-wrap; /* Opera 7 */
   /* width: 99%; */
   word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Answer 5

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 6

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

Answer 7

As word-wrap: break-word does not work well when the width is not fixed (and even less in <table>), Stack Exchange adds some invisible Unicode markers, which browsers use to find possible positions for line breaks. But: those invisible markers are still there when the visitor copies the text, which might be bad. More details on Meta, in https://meta.stackexchange.com/questions/170970/occasionally-the-unicode-character-sequence-u200c-u200b-zwnj-zwsp-is-insert/.

Instead of Unicode magic, inserting <span style="display: inline-block"></span> every few characters seems not to have a bad effect when copying the resulting text. This works for me in Chrome 25, Firefox 19, Safari 6, Internet Explorer 9 (in Windows 7 on Parallels on a Mac; simulating IE8 and IE7 works too), stock browser and Chrome on Android 4.1, and Safari on iOS 6.1.2, and is probably also supported in Opera. See this JS Bin example.

Some day, <wbr> will be the solution, but not today: though IE7 supported it, IE8 and IE9 don't.