Menu
I know in html there is a non-breaking hyphen (#8209), but I am needing a non-breaking en dash (#8211). They are used differently. Is there proper way of doing this besides wrapping the text and en-dash with no-break code throughout my document, like:
<nobr> TEXT #8211 TEXT </nobr>
753
An en dash is a midsize dash (longer than a hyphen but shorter than an em dash) that is mostly used to show ranges in numbers and dates. It can also be used for clarity in forming complex compound adjectives. The en dash derives its name from the fact that it is meant to be the same width as the letter N.
The answer to this dilemma is to use non-breaking hyphens instead of regular dashes when you don't want Word to break a line at the hyphen. To do this, hold down the Ctrl and Shift keys as you type the dash (this is the same as typing Ctrl and an underscore). Word will then not break the line at that point.
If you want to be official about things, use the en dash to replace a hyphen in compound adjectives when at least one of the elements is a two-word compound.
The non-breaking space, or hard space, is a special character that "binds" two words together to prevent line breaking. To insert a non-breaking space, put this between the two words: Example. The soft hyphen is an invisible character that you put inside a particular word to indicate where a hyphenated break is allowed ...
Try surrounding the en dash with the Word-Joiner character (#8288).
TEXT⁠–⁠TEXT
This question was driving me crazy in a recent project. I found it hard to believe that en dashes are by default breaking characters. If you're okay inserting extra characters with html, then ⁠ works well. Note, only a word-joiner is necessary after the en dash, since I believe they don't break before.
For a number of reasons, manually putting extra characters everywhere in my source HTML was not going to work for me, and I came up with a javascript solution which automatically applies a .nobreak CSS class to any en dash and the character immediately following it.
<style>
.nobreak {
white-space: nowrap;
}
</style>
<body>
<p>This is a paragraph with a number range, 1–34, and it will never break after the en dash.</p>
<script>
$("body").html(function(_, html) {
return html.replace(/(–.)/g, '<span class="nobreak">$1</span>')
});
</script>
</body>
An even simpler solution might be to use the same script to automatically insert ⁠ after en dashes. Just change the js to:
$("body").html(function(_, html) {
return html.replace(/–/g, '–⁠')
});
As per of this documentation, and other answer about the word joiner –, the following HTML should produce a non breakable en dash:
If the character does not have an HTML entity, you can use the decimal (dec) or hexadecimal (hex) reference.
<p>
Will break :
<br />
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT–TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
<p>
<p>
Won't break (word joiner):
<br />
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT⁠–⁠TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
<p>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
