How to prevent line break at hyphens in all browsers - html

Question

We have the CKEditor in our CMS. Our end users will input some long articles via that CKEditor. We need a way to prevent line break at hyphens on those articles.
Is there a way to prevent line break at hyphens in all browsers?
Or does CKEditor have an option to prevent that?

Answer 1

You can use ‑ which is a Unicode NON-BREAKING HYPHEN (U+2011).
HTML: ‑ or ‑
Also see: http://en.wikipedia.org/wiki/Hyphen#In_computing

Answer 2

One solution could be to use an extra span tag and the white-space CSS property. Just define a class like this:
.nowrap {
white-space: nowrap;
}
And then add a span with that class around your hyphenated text.
<p>This is the <span class="nowrap">anti-inflammable</span> model</p>
This approach should work just fine in all browsers - the buggy implementations listed here are for other values of the white-space property: http://reference.sitepoint.com/css/white-space#compatibilitysection

Answer 3

I’m afraid there’s no simpler way to do it reliably than splitting the text to “words” (sequences of non-whitespace characters separated by whitespace) and wrapping each “word” that contains a hyphen inside nobr markup. So input data like bla bla foo-bar bla bla would be turned to bla bla <nobr>foo-bar</nobr> bla bla.
You might even consider inserting nobr markup whenever the “word” contains anything but letters and digits. The reason is that some browsers may even break strings like “2/3” or “f(0)” (see my page on oddities of line breaking in browsers).

Answer 4

You are unable to do it without editing every HTML instance. Consequently, I wrote some JavaScript code to replace them:
jQuery:
// Replace hyphens with non-breaking ones
$txt = $("#block-views-video-block h2");
$txt.text( $txt.text().replace(/-/g, '‑') );
Vanilla JavaScript:
function nonBrHypens(id) {
var str = document.getElementById(id).innerHTML;
var txt = str.replace(/-/g, '‑');
document.getElementById(id).innerHTML = txt;
}

Answer 5

Use the word joiner character (⁠) around the hyphen. It works in Internet Explorer as well.
Fix specific hyphens...
function fixicecream(text) {
return text.replace(/ice-cream/g, 'ice⁠-⁠cream'));
}
Or everything...
function fixhyphens(text) {
return text.replace(/(\S+)-(\S+)/g, '$1⁠-⁠$2'));
}

Answer 6

Try this CSS:
word-break: break-all;
-webkit-hyphens:none;
-moz-hyphens: none;
hyphens: none;