CSS line break, Web design, Wordwrap, Css breaks

Can some one help me with this issue of css, I have a div structure like: Its with long string to make sure it doesnt breaks CSS but with this code it is... I tried using PRE with word wrap and PHP wordwrap() function...all of them give me the same overlapped output... I want to just break so long strings such that it fits in my div and all the divs are evenly placed...

The css is as: .load {margin-left:40px; width:300px; height:30px; font-size:12px; border-bottom:solid 1px #FFFFFF;} ...............HTML...................

<div class="load" id="load">
        <span>开发者_JAVA技巧
            dddddddddddddddddsssssssssssssssssssssss<br />

ssssssssssssssssssssssssssssssssssssssss

ssssssssssssssssssssssss Time:

        </span></div>   

dddddddddddddddddddddddddddddddddddddddd

ddddddddddddddddd TIME:

............many such divs

Unable to attach a screenshot....but the output is overlapped DIV's...and Divs which have no or less text are ok..

You might try using the word-wrap property as shown in the following demo:

http://jsfiddle.net/audetwebdesign/pTH6Y/

Word-wrap works only when applied to block level elements of fixed width, the div in my example with class exactFit.

word-wrap is a CSS3 property, so check it carefully for cross-browser issues, there may be vendor specific prefixes that you may need to use to make the styling work properly in more browsers.

There is another approach that relies on the white-space property:

white-space: pre;           /* CSS 2.0 */
white-space: pre-wrap;      /* CSS 2.1 */
white-space: pre-line;      /* CSS 3.0 */
white-space: -pre-wrap;     /* Opera 4-6 */
white-space: -o-pre-wrap;   /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap;  /* HP Printers */
word-wrap: break-word;      /* IE 5+ */

What you are really trying to do here is find an approach that works across all the popular platforms.

For reference: http://perishablepress.com/press/2010/06/01/wrapping-content/

Its kinda hard to break a word that is reaaaaaaaaaaaaaaaaaaaaaaaaly long, you can only wrap actual sentences.

Also you should set the style of the div to hide overflow, thats what I always do to prevent your template to glitch:

div{ overflow:hidden; }

Other possible values are:

oveflow-y:hidden;
oveflow-x:hidden;
// auto -- scrolls when overflowwing
// scroll -- scroll bar always visible