How to add space after "," in a string using CSS/Sass

Question

I have a table cell and it has a string in it. I need to give space provide a single space after comma using only CSS/scss. It should look like this.

Currently it looks like below image

This 3,500 GE text is in a span tag and I also need to change the position of text inside the span tag as shown in first tag.

All I can find solution using JS, but I want through only CSS/SCSS.

.amountCount {
  text-align: center;
  position: relative;
}

<span class="amountCount">3,500 GE</span>

This can't be done in pure CSS. You'll either need to modify the DOM, use javascript (to modify the DOM), or use a font with a larger character width for the comma. — Daniel Beck, Nov 17 '21 at 15:40
as say here https://stackoverflow.com/questions/8677805/formatting-numbers-decimal-places-thousands-separators-etc-with-css a spec exist to format number according to css class but no news until today — jeremy-denis, Nov 17 '21 at 15:41
You could use a custom font where the symbol for "," contains blank space on its right. The font can be applied in CSS: define it with `@font-face { font-family: 'bigComma'; src: url('fonts/bigComma.ttf'); }` and apply it with `.amountCount { font-family:'bigComma'; }` } — Vendec, Nov 17 '21 at 15:42

score 1 · Answer 1 · answered Nov 17 '21 at 15:54

First of all, CSS isn't suitable for that operation since CSS is in charge of styling, not modifying the actual contents that exist in the DOM.

In any case, if you really need to do it with CSS and you can divide the HTML content in two, you could insert new elements with custom contents using CSS and kind of reach your goal.

.amountCount span:not(:last-child):after{
  content: ", ";
}

<span class="amountCount">
  <span>3</span>
  <span>500 GE</span>
</span>

Rounin · Answer 2 · 2021-11-17T18:58:31.737

0

There is an (admittedly imperfect) HTML-only solution, which is to use a full-width comma:

&#65292;

Working Example:

table,
td {
  border: 1px solid rgb(0, 0, 0);
}

td {
  padding: 6px 12px;
}

<table>
  <tr>
    <td><span class="amountCount">3,500 GE</span></td>
    <td><span class="amountCount">3&#65292;500 GE</span></td>
  </tr>
</table>

N.B. I recognise this is imperfect since you want the whitespace to display only on the right-hand side of the comma character, not on both sides.

edited Nov 17 '21 at 18:58

answered Nov 17 '21 at 16:05

Rounin

27,134
9
83
108

here we are adding 2-3 spaces, but I want only a single space in between "," and 5 – raj basilio Nov 17 '21 at 16:29
In fact, we're not adding _any_ spaces - just using a different sort of comma. But I acknowledge this isn't really what you're looking for. I wanted to post the HTML-only solution to showcase a different sort of approach, involving the deployment of Unicode extended characters, rather than CSS. – Rounin Nov 17 '21 at 18:59

How to add space after "," in a string using CSS/Sass

2 Answers2