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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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

，

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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.

CodePudding user response：

You can add a span and create a space.

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

With css something like:

.comma_space {
    display: inline-block;
    width: 30px;
}

Obviously you will need to insert the span if the data is dynamic.