CSS line break, Web design, Wordwrap, Css breaks

Question

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>
            dddddddddddddddddsssssssssssssssssssssss<br />

ssssssssssssssssssssssssssssssssssssssss
ssssssssssssssssssssssss Time:

        </span></div>

dddddddddddddddddddddddddddddddddddddddd
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..

Marc Audet · Accepted Answer · 2011-03-07 19:51:07Z

4

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/

edited Mar 7, 2011 at 19:51

answered Mar 7, 2011 at 19:09

Marc Audet

47k11 gold badges68 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arjan Over a year ago

For future reference: CSS 3.0 proposes overflow-wrap to replace word-wrap. Chrome still uses word-wrap though.

Antwan van Houdt · Accepted Answer · 2011-02-05 08:51:13Z

-1

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

answered Feb 5, 2011 at 8:51

Antwan van Houdt

7,0011 gold badge31 silver badges53 bronze badges

Collectives™ on Stack Overflow

CSS line break, Web design, Wordwrap, Css breaks

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related