Soft hyphen in HTML (<wbr> vs. &shy;)

html text soft-hyphen wbr
Pontus picture Pontus · Oct 22, 2008 · Viewed 139.6k times · Source

How do you solve the problem with soft hyphens on your web pages? In a text there can be long words which you might want to line break with a hyphen. But you do not want the hyphen to show if the whole word is on the same line.

According to comments on this page <wbr> is a non standard "tag soup invented by Netscape". It seems like &shy; has its problems with standard compliance as well. There seems to be no way to get a working solution for all browsers.

Which is your way for handling soft hyphens and why did you choose it? Is there a preferred solution or best practice?

See related SO Discussion here.

Answer

Marco picture Marco · Oct 22, 2008

Unfortunately, &shy's support is so inconsistent between browsers that it can't really be used.

QuirksMode is right -- there's no good way to use soft hyphens in HTML right now. See what you can do to go without them.

2013 edit: According to QuirksMode, &shy; now works/is supported on all major browsers.

Related questions

HTML: Changing colors of specific words in a string of text

I have the below message (slightly changed): "Enter the competition by January 30, 2011 and you could win up to $$$$ — including amazing summer trips!" I currently have: <p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;"> formatting the text …

Read More
Setting a max character length in CSS

I am making responsive website for school and my question is: How do I set a max character length of the sentences (with CSS) on my website (like 75 characters) that when I have a very large screen, the sentences wont …

Read More
Extracting text from HTML file using Python

I'd like to extract the text from an HTML file using Python. I want essentially the same output I would get if I copied the text from a browser and pasted it into notepad. I'd like something more robust than …

Read More