Word Division: On “word-break,” Soft Hyphens, and Zero-Width Spaces
Post from February 8, 2007 (↻ March 21, 2021), filed under Web Development.
This post is outdated. (Consider
Word breaks and hyphenation are sometimes a problem when it comes to little available space but long words: The longer the word and the less space available, the more a layout is at risk. English appears to be less affected than other languages (I suspect Finnish and also German to be good examples for use of overly long words), but every once in a while a developer looks for ways to “automatically” break words.
Let’s take a look at possible solutions (example page).
word-break sounds quite promising, I understand the specification that it does not demand from implementations to really take into account grammar, but to rather provide word breaking on a per-letter basis. That’s how it works now when you try
break-all (see example), as long as you test with Internet Explorer which supports parts of this formerly unstandardized property.
Since this is just a little round-up, I will state that
- does not provide the kind of hyphenation we usually need, and
- is not yet broadly supported.
- can also “consider grammar” (when used in the right places and in conjunction with a language that splits words using a hyphen, of course), but
- is not yet supported at least in Gecko-based browsers (like Firefox, for example).
Zero-width spaces—see Unicode’s General Punctuation chart (PDF)—are used the same way as soft hyphens, namely by placing
​ entity references in your HTML. So what’s to note when you bank on zero-width spaces?
- Depending on the language they might be a good but also a poor choice, when “just splitting up words” could lead to spelling mistakes, and
- they appear to be supported the best, despite causing additional white space in Internet Explorer 6 (which isn’t necessarily a problem since IE 7 is doing well) and—contrary to soft hyphens—coming with some uncertainty around whether there are user agents that don’t display the character correctly
Update (July 9, 2007)
I’m Jens Oliver Meiert, and I’m a web developer (engineering manager) and author. I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.
If you have questions or suggestions about what I write, please leave a comment (if available) or a message.
On August 3, 2007, 10:34 CEST, Miha Hribar said:
Great article. I haven’t heard much of the mentioned zero width space, but the fact that it doesn’t work in IE6 still is a major issue (as a vast majority of users still haven’t upgraded their IE versions).
On that note, you forgot to mention the wbr tag, as it currently is the only piece of code that works well on all browsers I tested. Though it is not a valid tag, it still gets the job done (if you can live with all those failed XHTML validation results 😊).
For more info on the wbr tag check out quirksmode
On March 19, 2009, 18:11 CET, LeeJH said:
<span style="font-size:0"> </span> gives an invisible space that the browser can wrap on, but the downside is that it ends up in the clipboard and if you use it excessively (between every character) it takes too long to render.
On December 20, 2009, 14:49 CET, unlx said:
Another possible option is using the word-spacing CSS option, which is pretty widely supported. If you set it to a negative value your spaces appear invisible. Again, like all but word-break the space does then appear when the text is copy/pasted.
Have a look at the most popular posts, possibly including:
- Why “Conditional Comments” Are Bad, Repeat: Bad
- Weird Weekend Without Happy End: Eggebek, Flensburg, Denmark, Bremen
Perhaps my most relevant book: CSS Optimization Basics (2018). Writing CSS is a craft. As craftspeople we strive to write high quality CSS. In CSS Optimization Basics I lay out some of the most important aspects of such CSS. Available at Amazon, Google Play Books, and Leanpub.
Looking for a way to comment? Comments have been disabled, unfortunately.