有没有一种简单的方法来设置字符串的最后几个字符的样式？答案

【问题标题】：Is there an easy way to style the last couple characters of a string?有没有一种简单的方法来设置字符串的最后几个字符的样式？
【发布时间】：2011-01-13 22:23:20
【问题描述】：

我有一些浮点数，我想指出最后几位数字并不那么重要。我的想法是这样的。

对于号码 273.978

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

如果有类似“nth-last-chars”的 CSS 选择器，那就太好了。然后我可以在我的 CSS 文件中设置这一切，而不是在 JavaScript 中截取数字。有没有更好的方法来实现这一点？

编辑：这是原生 JavaScript 解决方案的样子：

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

【问题讨论】：

纯 CSS 解决方案还是接受 javascript？
CSS 会很棒，但我并不看好它，所以我会采取最好的 JavaScript 解决方案。我正在使用 YUI3，但我认为这并不重要。
我认为没有严格的 CSS 解决方案。您在这里介绍的几乎就是我会做的事情，并且会想象任何 javascript 解决方案都会做的事情。

标签： javascript css stylesheet

【解决方案1】：

和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>

【讨论】：

【解决方案2】：

在 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>

这里有一个fiddle 来演示它。很抱歉，它不是纯 JavaScript，但我相信这里的某个人可以提供本机解决方案，如果这不会减少你的玉米。

更新： 这是一个非 jQuery 解决方案，另一个 fiddle 演示了它。我还将样式分解为 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>

【讨论】：

【解决方案3】：

除了服务器端方法（最简单的方法）之外，您还可以添加一个具有 width: 1.75em; background-color: rgba(255,255,255,0.5) 的覆盖跨度并将其固定到容器对象的右侧，并且 z 索引大于主浮动显示对象。

如果您觉得是实验性的，您可以尝试 HTML5 <input type="number" step="0.1" /> element，它会根据浏览器的值四舍五入到最接近的值。

【讨论】：

这似乎比 JavaScript 方法更冒险。虽然如果你通过一个例子来工作，我可能会被说服。我真的没有那种实验性的感觉；）
是的 - 我会去服务器端 tbh

【解决方案4】：

您可以使用 PHP 为前 3/4 个字符的 span 标记添加一个类（我假设您使用 php 来生成这些浮点数），然后再添加一个不同的类，

然后只需将类添加到您的 CSS 文件中即可根据需要突出显示。

AFAIK 没有 CSS 选择器可以满足您的要求，'nth' 选择器更多地用于标签、类和 id，而不是单个字符。

编辑：在 javascript 中，这可以通过使用 foo.charAt(N);

来完成

所以将你的字符串加载到一个 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);

然后您可以将字符打印到代码中的适当位置。

【讨论】：

数字都是严格意义上的客户端。