How to make content fit in DIV

[gnawz]

How do I make sure data/text displayed in this div automatically goes to a new line as opposed to exceeding/overflowing in the <div>?

 

I have tried the overflow and display properties but can,t make it.

 

Your help will be much appreciated

 

My CSS

 

   #pagecontent {
   width:490px;
   height: 240px;
   position: absolute;
   color: #fff;
   top: 115px;
   left: 378px;
   border: 3px solid white;
   background: #901315;
   padding: 0px;
}

[cahamilton]

Link to the page?

[Axeia]

You seem to be describing the default behavior of any browser.

It's white-space: wrap; perhaps the div in question is inheriting white-space: nowrap; from somewhere? Just overwrite it with wrap then.

 

If you want something like

<div style="width: 100px;">
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>

to automatically break into something displaying like

+----------------+
|ssssssssssssssss|
|ssssssssssssssss|
|ssssssssssssssss|
|ssssssssssssssss|
|ssss            |
+----------------+

Then you're out of luck, it's impossible to do in html/css.

[gnawz]

Which are the options to go about achieving that?

[Axeia]

A fixed width font and some substr  magic in either javascript or PHP.

 

If you're worried about users breaking the layout, I'd go with overflow: auto;

 

[edit] do note that my ssssssssssssssssssssssssssssssss example had no spaces, if it was ssssssss ssssssss sssssss it would break down in lines properly with white-space: wrap;

[gnawz]

I'm not sure I understand "A fixed width font"

 

overflow: auto; puts clumsy looking scroll

 

white-space: wrap; will be going to a new line after every space.

 

Does this mean one can not really control overflow or expnasion of DIVS in CSS?

 

 

[Axeia]

You can as you've seen, you just can't break something up into pieces.. since that's not styling, that's altering the content.

Fixed width = a font where every character has the same width, so a 'W' is as width as an 'i'

So not like this:

iiiiiiiiii

wwwwwwwwww

But like this:
iiiiiiiiii
wwwwwwwwww