CODEWITHSUNDEEP
htmlcharacter-encoding
Samuel Borders
Samuel Borders

Reputation: 113

Non-breaking en dash, not a hyphen

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>

Upvotes: 11

Views: 10670

Answers (3)

Alex M
Alex M

Reputation: 61

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 &#8288; 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 &#8288; after en dashes. Just change the js to:

$("body").html(function(_, html) {
    return  html.replace(/–/g, '–&#8288;')
});

Upvotes: 6

el-teedee
el-teedee

Reputation: 1341

As per of this documentation, and other answer about the word joiner &#8211;, 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&#8211;TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
<p>

<p>
Won't break (word joiner):     
<br />
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT&#8288;&#8211;&#8288;TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
<p>

Upvotes: 1

Bron
Bron

Reputation: 511

Try surrounding the en dash with the Word-Joiner character (#8288).

TEXT&#8288;&#8211;&#8288;TEXT

Upvotes: 17

Related Questions