Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

For the number 273.978

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

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

EDIT: Here's what a native 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>
like image 428
mjhm Avatar asked Jan 13 '11 22:01

mjhm


1 Answers

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>
like image 126
drudge Avatar answered Nov 15 '22 22:11

drudge