layout problem: keeping a fixed width in CSS with varying text

Question

The "span" tag that encompasses the text I'm trying to display is of 500px width.

Now, every time I insert a text longer than that width, it crosses over to complete the text. That only happens when the text has no spaces (like:

sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

you get the picture.

I've tried setting max-width, but it doesn't help either.

Any suggestions? (I'd hate to have to cut the text with php)

Answer 1

Do you also hate to cut the text with CSS? Try to use overflow: hidden. But that will cut the text.

I don't know about the structure of your text, but if you're really expecting words long as in your example, how about inserting a space into looooong words that would otherwise break your layout and let HTML word-wrap take care of the line breaks?

Answer 2

word-wrap: break-word

It's supported in IE, Firefox 3.5, Chrome, Safari and Opera 10.50. It's even supported in old versions of IE, since it's a Microsoft invention which is now part of CSS3.

You can see a preview here.