Internet Explorer 7 collapses white space on an empty span, how do I prevent this?

I have the following markup:

<div><span class="first-name"></span> is really cool.</div>

which gets populated by AJAX/JavaScript after the page loads:

$(function () {
    $.get('/get-data', function (response.) {
        $('.first-name').text(response.name);
    });
});

In IE, this results in the white space after the span collapsing so I get: "Charlieis really cool." Doesn't happen in other browsers and I'm able to work around it for now by putting a &nbsp in the span开发者_运维技巧 for starters, but that feels like a big hack.

Is there a better way to handle this?

Also, here's a live example to run in IE 7 if you want: http://jsfiddle.net/rxAK4/.

I often find   to be very handy when there's any question at all about whether or not a space I want will be displayed. I wouldn't have any problems using it here.