Comments on: taming long words with word-wrap

By: PJ Brunet

PJ Brunet — Tue, 25 Oct 2011 04:40:17 +0000

This tag will break one really long line (like the example) but it doesn’t try to break a long word that has plenty of room to break on the previous line. In other words, it’s not breaking at every opportunity.

Try this example: http://tomakefast.com/wrap-test.html

In Chrome the numbers wrap as you would expect. In FF you get two columns of numbers. The wrapping is not aggressive enough. Even if you take out the text-align:justify you still get two columns of numbers instead of wrapping.

My solution was to insert “shy” tags with PHP. However, looks like Firefox goes berserk if you use “shy” tags on words shorter than 8 chars!

Firefox is the new IE ;-)

By: PJ Brunet

PJ Brunet — Tue, 25 Oct 2011 03:46:33 +0000

I’m trying this in Firefox 7 and it’s not working. Too bad for FF users, I can’t waste any more time on it.

By: DunxD

DunxD — Sat, 17 Jul 2010 11:45:00 +0000

The comment spam above shows that you have implemented the example in your site design :-)

By: Febri

Febri — Wed, 09 Dec 2009 03:46:36 +0000

I’m using opera ver. 10.10, however, it’s not working properly. The result is the same either i click normal or break-word.
What happen with this matter?
is it opera ver. 10.10 not compatible with this function?

By: Mark

Mark — Tue, 30 Jun 2009 10:13:19 +0000

You might want to note that most of the examples won’t display properly in a feed such as Planet Mozilla.

By: Gerv

Gerv — Tue, 30 Jun 2009 08:56:08 +0000

Hmm. Somewhat unexpected and non-usable behaviour of this comment system with regard to tags. If there’s no note saying otherwise next to a comment form, one would expect them to be escaped rather than silently stripped. Let me try again:

“Presented in a , this huge URL behaves well enough to at least not break the layout of this page. But, it’s not really handled all that gracefully beyond that.”</p> <p><cough><br /> <a href="http://www.gerv.net/temp/layout-broken.png" rel="nofollow">http://www.gerv.net/temp/layout-broken.png</a></p> <p>(Firefox 3.5 pretty-much-final, Linux Ubuntu 9.04)</p> </article> <article> <h1>By: Gerv</h1> <p>Gerv — Tue, 30 Jun 2009 08:54:14 +0000</p> <p>“Presented in a , this huge URL behaves well enough to at least not break the layout of this page. But, it’s not really handled all that gracefully beyond that.”</p> <p><a href="http://www.gerv.net/temp/layout-broken.png" rel="nofollow">http://www.gerv.net/temp/layout-broken.png</a></p> </article> <article> <h1>By: Sebastian</h1> <p>Sebastian — Tue, 30 Jun 2009 06:34:36 +0000</p> <p>Sure it should behave as one word (and it does, right?).</p> <p>@Andy<br /> I agree. Even IE does text-overflow: ellipsis! That’s probably the only CSS hack I use that most browsers EXCEPT Firefox support. :(</p> </article> <article> <h1>By: Smooth Criminal</h1> <p>Smooth Criminal — Tue, 30 Jun 2009 04:25:29 +0000</p> <p>If this is one word, shoould it be behaving as one by double clicking on it?</p> </article> <article> <h1>By: Andy</h1> <p>Andy — Tue, 30 Jun 2009 00:17:58 +0000</p> <p>Niiice. :) Now we need its cousin to be implemented too — “text-overflow: ellipsis”:</p> <p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=312156" rel="nofollow">https://bugzilla.mozilla.org/show_bug.cgi?id=312156</a></p> <p>…For Firefox 3.6?</p> </article> </main></body></html>