3

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.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
GoldMath
  • 79
  • 1
  • 2
  • 5
  • In my years of writing CSS I've never seen anything like what you're asking. What is keeping you from attaching a bit of JavaScript? – chazsolo Oct 17 '14 at 13:05
  • 1
    This isn't possible with CSS alone. – James Donnelly Oct 17 '14 at 13:10
  • I don't think you can with pure css, the only thing that i know that is related is [text letter spacing](http://www.w3schools.com/cssref/pr_text_letter-spacing.asp) but that is for every character – starvator Oct 17 '14 at 13:11
  • 2
    It can't be achieved for text inputs. For regular block element, there may be hacky workarounds (e.g. http://jsfiddle.net/au5m5n3j/1/), but none of them can be considered reliable. Script that creates extra markup to achieve this seems to be the best way by now. – Ilya Streltsyn Oct 17 '14 at 13:36

1 Answers1

3

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.

roughcoder
  • 1,190
  • 1
  • 8
  • 11