Wrapping long text in CSS

Question

Hello,

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

Unfortunately, unless you're happy with supporting only specific browsers (IE7/Win, Safari, Firefox 3.5), there's no pure CSS solution to your problem.

word-wrap: break-word; works, but only in IE.

If you're able to alter the text, either server-side (PHP, ASP) or possibly client-side (Javascript), you could write a small function that inserts 'shy hyphens' (­) into your text. That way, text can be broken up at every instance of the hyphen, and shy hyphens will not be displayed if the word is not broken up.

Edit, an example:

bla­bla­bla­bla­bla­bla­bla­bla­bla­ (etc)

will display as follows in your browser:

blablabla-
blablabla-
blabla

Answer 2

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 3

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 4

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 5

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 6

For CSS, Here is webmaster example in comments last

http://fun2mobo.awardspace.biz

Works I.e. n Opera and others too check pls

I use overflow:auto and word-wrap:break-word css, overflow aut does display content in all browsers with div having width by style or normally.