Is there an easy way to style the last couple of characters of a string?

Question

I have floating point numbers where I would like to indicate that the last few digits are not that important. What I mean is something like this.

For number 273.978

<span style="font-weight:bold">273.9</span><span style="color:#3399ff">78</span> 

It would be great if something like a nth-last-chars CSS selector. Then I could set all this in my CSS file, instead of chopping the number in JavaScript. Is there a better way to achieve this?

EDIT: This is what a full-blown JavaScript solution looks like:

 <span id="numstart" style="font-weight:bold">123.4</span><span id="numend" style="color:#3399ff">57</span> <script> var newnum = 273.978; var numStr = String(newnum) var numLen = numStr.length; var newStart = numStr.substring(0,numLen-2); var newEnd = numStr.substring(numLen-2,numLen); document.getElementById("numstart").innerHTML = newStart; document.getElementById("numend").innerHTML = newEnd; </script> 

Answer 1

At the top of my head in jQuery:

 <script type="text/javascript"> $('.numbers').each(function() { $(this).html( $(this).html().substr(0, $(this).html().length-2) + "<span style='color: #3399ff'>" + $(this).html().substr(-2) + "</span>"); }); </script> 

Here's a fiddle to demonstrate this. I am sorry that this is not simple JavaScript, but I am sure that one of the people here can offer their own solution if this does not cut the corn.

UPDATE: And here is a solution other than jQuery and another fiddle demonstrating it. I also violated the style in CSS.

 <style type="text/css"> .unimportant { color: #3399ff; } </style> <script type="text/javascript"> var numberTargets = document.getElementsByClassName('number'); for(i=0; i<numberTargets.length; i++) { var html = numberTargets[i].innerHTML; numberTargets[i].innerHTML = html.substr(0, html.length-2) + "<span class='unimportant'>" + numberTargets[i].innerHTML.substr(-2) + "</span>"; } </script> 

Answer 2

Had the same idea as stef:

 <style type="text/css"> .number { font-family: monospace; } .number:after { background-color: rgba(255,255,255,0.5); content: ""; display: inline-block; height: 1em; width: 1.2em; position: relative; top: 0.25em; right: 1.2em; } </style> <span class="number">273.978</span> 

Answer 3

In addition to the server-side approach (the simplest), you can add an overlay range that has width: 1.75em; background-color: rgba(255,255,255,0.5) width: 1.75em; background-color: rgba(255,255,255,0.5) , and fix it to the right of the container object and the index az is larger than the main floating-point display object.

If you feel experimental, you can try the HTML5 element <input type="number" step="0.1" /> which, depending on the browser, is rounded to the nearest value based on its value.

Answer 4

You can use PHP to add a class to the span tag for the first 3/4 characters (suppose you use php to create these floating point numbers) and another class for something after that,

Then just add the classes to your CSS file to highlight as you wish.

AFAIK there are no CSS selectors to do what you need, nth selectors are more suitable for tags, classes and identifiers than single characters.

EDIT: In javascript, this can be done using foo.charAt (N);

So load your line in var:

 var foo=[number generation code]; var foo0=foo.charAt(0); var foo1=foo.charAt(1); var foo2=foo.charAt(2); var foo3=foo.charAt(3); 

Then you can print the characters in the appropriate place in the code.