133

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?

2
  • 1
    You might consider changing the accepted answer since the current accepted answer has a deprecated solution
    – inorganik
    Mar 18, 2020 at 15:18
  • FYI, the possibility of a new control to prevent line breaking after hyphens may be addressed in a CSSWG issue I filed: github.com/w3c/csswg-drafts/issues/3434
    – hftf
    Sep 26, 2020 at 9:32

7 Answers 7

326

You can use which is a Unicode NON-BREAKING HYPHEN (U+2011).

HTML: ‑ or ‑

Also see: http://en.wikipedia.org/wiki/Hyphen#In_computing

11
  • 4
    Thanks very much for your reply. But what we need to do is to prevent line break on ckeditor where all the content will be entered by the end users. we cannot tell everyone to enter unicode non-breaking hyphen. Is there any other way to prevent line break? or does ckeditor have an option to convert the hyphen automatically? Thanks again
    – Alan
    Jan 6, 2012 at 4:24
  • 11
    You can do a simple string replacement, replacing - with .
    – deceze
    Jan 6, 2012 at 4:35
  • 14
    Beware of limited font support to U+2011, see fileformat.info/info/unicode/char/2011/fontsupport.htm Jan 6, 2012 at 7:58
  • 7
    While this is certainly more elegant in theory then plastering nobr tags all over the place, it does not work very well in practice. IE displays it as an en dash, Safari adds more space around it than a normal dash, and most text editors display it as a question mark or box or other meaningless character.
    – Tgr
    Aug 20, 2012 at 10:14
  • 7
    @jakev I would go with white-space: nowrap as suggested by derekerdmann. Btw on FF/Win7 the shy dash seems to be converted into a regular dash when copy&pasted outside Firefox, even if the target application is Unicode-aware.
    – Tgr
    Mar 22, 2013 at 14:33
111

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

4
  • 1
    Thanks very much for your reply. But our text content will be entered by the end users via a ckeditor. we cannot tell everyone to add the <span> around the word. Is there any other way to achieve it? Thanks anyway
    – Alan
    Jan 6, 2012 at 4:26
  • 1
    @Alan - What kind of content are they adding that can't break at hypens? If it's a title or some other element that will always be on one line, then apply white-space: nowrap to the whole container. Otherwise, just let it go; first, there's no reason to prevent line breaks with hyphens for general content, and second, there's no way you'll be able to get what you're looking for to happen automatically unless you're willing to hack away at CKEditor. Jan 6, 2012 at 4:29
  • 13
    There are many situations where a line break after a hyphen is bad or just very wrong, as in “F-1” or when a hyphen is used as unary minus, as in “-42°” (and people use it that way, since they don’t know about the minus sign). Jan 6, 2012 at 8:03
  • This works, but the fact that it works is non-intuitive, because hyphens are not white space. <nobr> is much clearer. Mar 18, 2017 at 13:09
54

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).

6
  • 42
    The nobr tag is not standard, and strongly discouraged by the W3C. See w3.org/TR/html5/obsolete.html#non-conforming-features Jan 6, 2012 at 14:29
  • 23
    Unlike any other approach, the nobr markup works on all browsers, works even when stylesheets are disabled, and works independently of support to special characters. Is there a real problem with it? Jan 6, 2012 at 22:45
  • 23
    Why not <span style="white-space: nowrap"></span> ?
    – SineSwiper
    Dec 9, 2014 at 23:00
  • 7
    @JukkaK.Korpela the issue with it is that modern browsers may decide to drop support for it, and can do so without violating the HTML specification. It's a "should" feature, which is merely a suggested thing to implement. In regards to the stylesheets, if a user has disabled style sheets, then they expect not to have any styles
    – mirhagk
    Dec 10, 2014 at 20:44
  • 5
    I've been developing sites for 10 years and didn't even know you COULD disable stylesheets in your browser. Who does it really (aside from people who would similarly opt for the self-flagellation of disabling JavaScript by default in this day and age)? If we need to be so pedantic, where's the alternative solution on offer?
    – John Rix
    May 8, 2017 at 22:43
6

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;
}
2
  • 1
    I like the idea here, as it doesn't involve editing every single bit of HTML that may contain a hyphen. However, I suspect you may run into performance issues processing every bit of text on an entire page like this, especially if there are a lot of elements. Aug 31, 2017 at 20:55
  • @SeantheBean For sure. I propose that you only process the dynamic sections of text where there may be hyphens. In the case of static text, the developer could go and manually replace the hyphens with non-breaking hyphens. Jan 23, 2022 at 1:03
3

Use the word joiner character (&#8288;) around the hyphen. It works in Internet Explorer as well.

Fix specific hyphens...

function fixicecream(text) {
    return text.replace(/ice-cream/g, 'ice&#8288;-&#8288;cream'));
}

Or everything...

function fixhyphens(text) {
    return text.replace(/(\S+)-(\S+)/g, '$1&#8288;-&#8288;$2'));
}
0

Try this CSS:

word-break: break-all; 
-webkit-hyphens:none;
-moz-hyphens: none; 
hyphens: none;
5
  • 10
    While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! Jun 1, 2016 at 13:20
  • Wow, this is the simple and correct answer and it's downvoted, and bonkers wrong answers have more than 100 upvotes.
    – user12419604
    Feb 1, 2021 at 3:39
  • 2
    It helps also to add white-space: nowrap.
    – user12419604
    Feb 1, 2021 at 3:39
  • 3
    The question was to avoid breaking on existing hyphens, but this breaks words anywhere in the middle, now. Probably, not really what the OP was looking for. May 24, 2021 at 5:12
  • 1
    white-space: nowrap worked for me.
    – Simon Elms
    Oct 19 at 9:57
0

You can use the CSS line-break property:

line-break: anywhere;

Although the documentation says it is only for Chinese, Japanese, and Korean (CJK) languages, it also disables line-breaks for the hyphen character in English text. I tested in Firefox (Win10), Chrome (Win10), Edge (Win10), and Safari (OSX) and it worked perfectly for a textarea holding a long authorization key with hyphens in it. Replacing hyphens in a form field would require replacing them back on every form submit, so not an ideal choice.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.