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?

Senter

Not with CSS only (at least not really in a nice way). – Pancratium

Why specifically do you want to remove it? By default, white space characters are collapsed. – Descombes

@AustinBrunkhorst what do you mean with collapsed? A real space at the beginning or the end in a tag has no visual effect, a   on the other side creates a visual space. – Formication

I want to remove that nbsp as it collapse the alignment. I do not want to use jquery to handle this one. Can not CSS handle this type of cases? – Senter

Answer 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.

Scummy

thanks, It can be done with JQuery but i want this to be done by using CSS as there are lot of JS files are there on my page. – Senter

Using .number:before { content:'something' } is the only posibility you have. I'm afraid that you can't get the content already in your span and modify them via CSS. – Scummy

I dont think we can use "content" here because that entire content is coming from backend. We can not hard-code that value(0.15 ) – Senter

And you have to know CSS wasn't designed to perfork this kind of actions. Prefer Javascript or PHP solution if you can bypass your backend. – Scummy

Yes you are right. I too thought the same but I was hoping there would be some way to handle it by CSS. Let me go-ahead with jQuery as Muhammad Ali and Bardyl said. Thanks – Senter

Answer 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);
});

Diagnostics

As OP said he don't want to use jQuery. If it is not possible with css only then justify it – Amphiarthrosis

Answer 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.

Sierrasiesser

Answer 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);

Fenugreek

This only replaces the first instance, and jQuery is certainly not needed. – Descombes

Answer 5

Although you can not remove   completely using CSS, the CSS rules below can enforce the behavior of a normal space.

overflow-wrap: break-word;
word-break: break-word;

Shaia

Answer 6

You need to do it with JS, or PHP. It depends on what you use. overflow-wrap: break-word or word-break: break-word also break letters and it's not correct for grammar.

Racemic

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Satin