How to enable line break at hyphens on Firefox

Question

Chrome, IE, and Safari break lines at hyphens but Firefox doesn't.

Is there any way to make Firefox break lines at hyphens, like other browsers?

Answer 1

Insert the <wbr> tag after the hyphen. This tag is not present in any HTML specification (yet—it is in HTML5 drafts), but it has worked for a long time in browsers.

Firefox automatically treats a hyphen as allowing a line break after it when there are sufficiently many characters around the hyphen. But if you wish to allow line breaks more widely than that, use <wbr>, e.g. pre-<wbr>war.

Answer 2

Not easily. Try inserting a zero-width space (​) after each hyphen. For example:

a-​really-​long-​hyphenated-​phrase

This will make Firefox wrap as if there's a space, but it won't visually display that space.

It's easier to implement this if you have something processing your output server-side. Just run hyphens through a quick string replace.