Jump to content

How to make content fit in DIV


gnawz

Recommended Posts

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;
}


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;

Link to comment
Share on other sites

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?

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.