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)

So what do you want to happen?

David M
– David M

2010-03-03 16:29:12 +00:00
Commented Mar 3, 2010 at 16:29 — David M
– David M, Commented Mar 3, 2010 at 16:29

mercator · Accepted Answer · 2010-03-04 09:53:21Z

3

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.

edited Mar 4, 2010 at 9:53

answered Mar 3, 2010 at 16:33

mercator

28.7k8 gold badges66 silver badges74 bronze badges

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

1 Comment

Gal Over a year ago

merci beaucoup, that's what i've been looking for.

Select0r · Accepted Answer · 2010-03-03 16:30:02Z

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?

answered Mar 3, 2010 at 16:30

Select0r

12.7k11 gold badges51 silver badges70 bronze badges

Collectives™ on Stack Overflow

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

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