有没有办法使用CSS将较长的数字(“$ 100000000”)分成更易读的三元组(“$ 100 000 000”)?

我有一个有很多大数值的页面。 数百万和数十亿美元无处不在。 而且很难读懂这些数字,所以我的客户要求我把它们分成三个符号,“$ 100000000”=>“$ 1亿”。

这是完全合理的要求,但问题是,我不想在服务器端做到这一点,我不想用JavaScript做到这一点。 你看,我已经有一大堆javascript已经在这个页面上运行,对这些长数字进行复杂的计算,并且在从页面读取数据的每个位置插入一个parseReadableStringToInteger() ,并且将一个writeIntegerAsReadableString()在每个把结果写回页面的地方。

所以,我正在考虑使用CSS将长string显示为一组短的块。 我的第一个想法是-moz-column-webkit-column ,但不幸的是,他们只能使用已经被空格分开的单词。

也许有另一种方式? 任何build议,欢迎。

ps跨浏览器兼容性不是必需的。 我可以和Gecko和/或Webkit一起使用。

你将不得不find一个JavaScript的方式来做到这一点,我很确定。 任何CSS技术,即使可能,都不会是跨浏览器的。

没有办法通过CSS来完成,但是你可以像这样扩展Numbertypes:

  Number.prototype.formatMoney = function(c, d, t){ var n = this, c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0; return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : ""); }; 

然后像这样使用它:

 var count = 10000000; count.formatMoney(2, '.', ' ') 

该死的,我快到了!

跨度 {
    显示:块;
     -moz柱 - 间隙:5像素;
     -moz列宽度:24像素;
    自动换行:打破字;
 }

 <跨度> 100000 </跨度>
 <跨度>百万</跨度>
 <跨度>千万</跨度>
 <跨度>亿</跨度>

给我

 100 000
 100 000 0
 100 000 00
 1亿

唯一剩下的就是从右边开始分裂。 现在试验direction: rtl等:)

如果您不愿意使用JavaScript来更改格式,则应该从服务器更改它们的格式(即在呈现页面之前)。

这是一个可行的build议, 虽然我会承认这不是很好

使用jQuery框架,$(“#myElement”)。text()只返回文本(不是任何嵌套的html)。 所以你可以这样做:

 <p>$<span id="myElement"><span class="triad">1</span><span class="triad">000</span><span class="triad">000</span></p> 

并应用一些填充或边距,使其更具可读性。

当你然后打电话给:

 $("#myElement").text(); 

你会得到平原1000000回。

CSS:

 .triad { padding-left: 5px; } 

n1313, http ://wiki.csswg.org/ideas/content-formatting;)这不是一个解决scheme,只是想法

 function largeNumberToReadableNumber(number){ var str = Math.floor(amount)+""; //make the integer a string var sub = str.substring(str.length-3, str.length); //the last three characters newstr = " "+sub; var i = 1; while (sub.length >= 3){ sub = str.substring(str.length-((i+1)*3),str.length-(i*3)); //next three characters newstr = sub + " " + newstr; //append the characters i+=1; } return newstr; } largeNumberToReadable(120312381124124); //will output " 120 312 381 124 124" 

我相信这可以写得更好,更短,但它的工作。

我发现这一块的JavaScript可能会帮助你,如果你打算做客户端: http : //homepage.mac.com/ruske/ruske/C2127905073/E844527267/Media/FormatInteger.js

没有CSS操作string。 Sry你必须用JS来完成

如何有两次数字:一次用于显示和一次这样的操作:

 <span class="money" data-value="1000000">$ 1 000 000</span> 

然后你可以很容易地使用getAttribute('data-value')从你的JS中获得值,并以任何你想要的方式格式化数字。

data-*属性是HTML 5中的一个新function,但几乎所有当前浏览器都支持它(DOM中的.dataset属性,因此您必须在当前/旧版浏览器中使用getAttribute() )。

我希望这是可能的与CSS :(你不能获得文本值,并在以后使用CSS的操作中使用。

首先想到的是使用:after:beforecontent:" "
那么你只需要dynamic地在正确的数字周围添加标签并对其进行devise。