How to remove   from the end of spans with a given class?

Question

I need to remove the   after the value of given spans.
The HTML looks like this:

<span class="number">0.15&nbsp;</span>

The   is coming from the server (CMS).

Is there any way to remove the   by using CSS rules?

Solution 1

If this value is provided by your CMS, it's posible you can modify the value with php via str_replace(' ', '', $yourVar) before echo it in your span.

If you can't access with this, you can also use jQuery to do this... Just like Muhammad Ali said:

var str = $('.number').html();
str = str.replace(' ', '');
$('.number').html(str);

Something like this could work. But with CSS, isn't posible I guess.

Solution 2

You can't do this with only css. Somehow you have to use jquery for this. With Regular Expression you can simply do this.

var span = $('span').html();
span = span.replace(/ /g, '');
$('span').html(span);

DEMO

Note:   is coming from CMS them you have to use jquery code to replace it when your document loaded fully.

$(document).ready(function(){
    var span = $('span').html();
    span = span.replace(/ /g, '');
    $('span').html(span);
});

Solution 3

You cannot possibly remove characters from document content with CSS. That’s not what CSS is for. You can add characters to be rendered, with generated content, but not remove.

However, you might be able to undo the effects of a character on rendering. Consider the following example:

<span class="number">0.15&nbsp;</span>foo

The no-break space ( ) has two effects: it causes visible spacing, the same as a normal space character, and it prevents line break between “0.15” and “foo” when the browser formats the text. To prevent the latter effect, you could add a normal space using generated content, but then there will be too much spacing when a line break does not appear. To fix this, set the width of the pseudo-element to zero:

.number:after { content: " "; display: inline-block; width: 0; }

To remove the spacing effect of the no-break space, you can set a negative right margin. The main problem with this is that the width of a no-break space (and a space) depends on the font. It is on the average about one fourth of an em, but it may vary considerably. If you can regard the font as fixed (e.g., you are using @font-face), you can use the following code, with just the numeric value tuned as needed:

 .number {  display: inline-block; margin-right: -0.25em; }

As a side effect, this may also allow a line break between “0.15” and “foo”, since browsers may handle inline blocks in formatting so that they always allow line breaks before and after.

Solution 4

you can use javascript/Jquery framework to remove any charackey like this exampe Here

var span = $('span').html();
span = span.replace(' ','');
$('span').html(span);

View more solutions