css Text going horizontal instead of increasing height

Hi,

I have what seems a very basic question but its been puzzling me for a while now.

I have a div that shows comments from the database, however the div wont expand in height for some posts and just shows them overlapping:

http://mostplays.com/play/Create_A_City_3479

The css for the div is as follows:

	background-color:#FFFFFF;
	width:400px;
	padding:3px;

HTML:

Thanks for your help,

Dan

 

I presume this is occurring when the user enters in a long unbroken string of characters.

If there is no line break in the comment, the browser is not going to render one in. You've got to either do this server-side (which is usually overkill) or you can simply hide the overflow. The latter is probably a safe option considering that users seem to just be entering in long strings of exclamation marks. Though this will cut off things like long urls and whatnot. The third option is of course to tolerate overflow when it occasionally happens.

 

I've created a php function to insert a space after a continuous flow of characters though, you can see the gaps in that comment which is confusing.

It works fine here ...

http://mostplays.com/play/Iron_Works_30303

Could it be to do with them being symbols?

 

To be honest, I can't replicate your problem at all. The only thing I can suggest trying is maybe use & # 3 2 ; when inserting spaces to make sure it's not interpreted as a non-breaking space. There is no way that this should make a difference in theory, but since I can't replicate your problem I can only guess at the cause.

 

You might also consider allowing a scroll bar to be added (yes, to a div) to hide the overflow but still allow it to be viewed by the visitor.

 
overflow:scroll

Code (markup):