Don't split hyphenated words

Question

I'm developing a website (Wordpress, HTML, CSS, jQuery) with contents written in portuguese. There are a lot of words with hyphen, which are broken in half if they appear at the end of the line. Here's an example:

Batata frita pála-
pála, é uma tara de
sabor.

Is there a way I can detect if a word is hyphenated and not break it in half if it is at the end of the line? The ideal would be for the whole word to just go to the next line, but if not possible, I'm open to suggestions. Something like this:

Batata frita
pála-pála, é uma
uma tara de sabor.

More important to me than knowing the solution is to understand it. Thanks in advance.

EDIT

The website is developed on a CMS platform, the contents are inserted by the client and are dynamic. I can't expect the client to use non-breaking hyphens (HTML ‑) by himself.

Answer 1

Replace all of your hyphens with Non-Breaking Hyphens. It's the same as the non-breaking space ( ) only it's a hyphen.

Answer 2

If you're talking about the browser's own wrapping of text/HTML content (as opposed to regular expression splitting), I can think of two ways to do this:

• use a non-breaking hyphen (HTML ‑) instead of a regular one
• add <span style="white-space: nowrap"> around sections you don't want to wrap