Question

I am trying to convert an unordered list into a <select> box for people with small resolutions, indenting the text depending on the level in the list. To do this, I prepend the string with &nbsp;. However it looks like jQuery, for some reason, is double HTML-encoding this into &amp;nbsp;. How do I prevent this behavior and use a literal &nbsp; (i.e. so that a non-breaking space character is shown to the browser):

var text = '';
var i;

for (i = 0; i < level; i++) {
    text += '&nbsp;';
}
text += el.text();

if (el.hasClass('noclick')) {
    $('<optgroup />', {
        'label' : text
    }).appendTo('#menu select');
}
else {
    $('<option />', {
        'value' : el.attr('href'),
        'text' : text
    }).appendTo('#menu select');
}

Here's my jsFiddle.

Was it helpful?

Solution

Try using \u00A0 (the non-breaking space character) instead of &nbsp;.

OTHER TIPS

You can insert the literal non-break space character in your JavaScript scripts with \xA0:

text += '\xA0';
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top