Hyphenated word breaks.

Wouldn’t it be nice if you could force hyphenated word breaks in your paragraph text? For example, I’d like to have a simple CSS property to output this…

Lorem aliqua ipsum dolor sit amet, consectetur adipisicing elitsed iusmodtemporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation consectetur adipisicing ullamco ex­laborisnisi ut aliquipconsectetur ea commodo consequat.

instead of this…

Lorem aliqua ipsum dolor sit amet, consectetur adipisicing elitsed iusmodtempor­incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation consectetur adipisicing ullamco ex¬≠laborisnisi ut aliquipconsectetur ea commodo consequat.

Well. Here’s a few bad ideas.

  • You could add this property to your stylesheet: { word-wrap: break-word }. But it’s not uniformly supported across browsers. Believe it our not, IE is ahead of the game on this one.
  • You could also keep it simple and just hardcode the hyphenation in the template. But that’s not a great solution since things can get a little weird if users start resizing their text.
  • You might also try the almost totally useless <wbr> element. This forces a hyphenated word break depending on the browser’s whim. It’s never really worked consistently for me, but I’ve heard it’s sometimes useful for tables.

And now a good idea!

Use the “soft hyphen” entity – &shy;. Just drop this little beauty in the middle of your word wherever you want a hyphen and let the browser do it’s magic. If a word break is appropriate, you’ll get one. If not, our “soft hyphen” will be silently ignored. Awesome.

Tags:

Your thoughts?

Preview