views:

1659

answers:

4

How can you display a long string, website address, word or set of symbols with automatic line breaks to keep a div width? I guess a wordwrap of sorts. Usually adding a space works but is there a CSS solution such as word-wrap?

For example it (very nastily) overlaps divs, forces horizontal scrolling etc. wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

What can I add to the above string to fit it neatly within a few lines in a div or within the browser window?

+8  A: 

This question has been asked here before:

Long story short:

As far as CSS solutions go you have: overflow: scroll; to force the element to show scrollbars and overflow:hidden; to just cut off any extra text. There is text-overflow:ellipsis; and word-wrap: break-word; but they are IE only (break-word is in the CSS3 draft, however, so it will be the solution to this 5 years from now).

Bottom line is that if it is very important for you to stop this from happening with wrapping the text over to the next line the only reasonable solution is to inject &shy; (soft hyphen), <wbr> (word break tag), or &#8203; (zero-width space, same effect as &shy; minus hyphen) in your string server side. If you don't mind Javascript, however, there is the hyphenator which seems to be pretty solid.

Paolo Bergantino
I've marked this as the "solution" to the question, but to me it still has a few holes... break-word is essentially what I'd be looking at, the other options can insert manual breaks, spaces, hyphens etc but still won't neatly wrap the line.
Peter
Unfortunately there is no neat or elegant solution to this particular problem. We're all just getting by until break-word is supported.
Paolo Bergantino
If you end up doing server side line breaks, and you're using PHP, you can use the [wordwrap](http://php.net/manual/en/function.wordwrap.php) function.
Roman Stolper
+1  A: 

Hopefully someday we'll get access to the word-wrap property in CSS3: Force Wrapping: the 'word-wrap' property.

Someday...

Chad Birch
+2  A: 

word-wrap: break-word; is available in IE7+, FF 3.5 and Webkit enabled browsers (Safari/Chrome etc). To handle IE6 you will also need to declare word-wrap: break-all;

If FF 2.0 is not on your browser matrix then using these is a viable solution. Unfortunately it does not hyphenate the preceding line where the word is broken which is a typographical nightmare. I would suggest using the Hyphenator as suggested by Paolo which is unobtrusive JavaScript. The fall-back for non JavaScript enabled users will then be the broken word without hyphens. I can live with that for the time being. This problem will most likely arise in a CMS, where the web designer does not have control over what content will be entered or where line-breaks and soft-hyphens may be implemented.

I have taken a look at the W3 specification where hyphenation in CSS3 is discussed. Unfortunately it appears there are a few suggestions but nothing concrete yet. It appears the browser vendors are yet to implement anything either yet. I have checked both Mozilla and Webkit for proprietory code but there is no sign of any.

Kevin Rapley
A: 

Here is webmaster example in comments last

http://fun2mobo.awardspace.biz

Works I.e. n Opera

Rani