0
185
ViewsHow to add space after "," in a string using CSS/Sass
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>2 answers
Answer question0
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>0
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，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.