CODEWITHSUNDEEP
cssletter-spacingword-spacing
GoldMath
GoldMath

Reputation: 79

Auto space a text each 4 characters by CSS?

I wanted to ask if that text can automatically change to that form when you type by CSS.

Before : 513031421694 // After : 5130 3142 1694

I tried these ones (letter-spacing / word-spacing), without success, and I can only touch the CSS.

Upvotes: 3

Views: 3963

Answers (1)

roughcoder
roughcoder

Reputation: 1240

Sadly not at the moment, a JS solution is probably your only frontend option to achieve formatting across all element types.

There has been a CSS Working Group idea for data content formatting which would address this issue, though it seems to have had no movement or mention since 2008.

They proposed 2 new CSS rules @decimal-format and number-format.

@decimal-format price {
  grouping-separator: ",";
  decimal-separator : "."
}

.price {
  number-format: "###,##0.00", "price";
  /* price is actually redundant as this format would be the default */
}

Then a simple class would apply the formatting.

<span class="price">987654321</span>

Would display as 987,654,321.00 USD

But this is just an idea which has not moved since 2008.

Upvotes: 3

Related Questions