cssletter-spacingword-spacing

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.

Solution

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