用 css 将每个字母包围起来，而不使用 span
我试图在每个字母周围创建一个框，用于里程表样式的统计计数器。您知道如何在不将每个字母包裹在跨度中的情况下执行此操作吗？如果您有任何想法，我很想听听。
I'm trying to create a box around each letter to use for an odometer style stat counter. Do you know how to do this without wrapping each letter in a span? If you have any ideas I'd love to hear them.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
如果您使用的是单倍行距字体，则可能可以使用带有框的背景图像。
If you are using a mono spaced font, you could probably use a background image with the boxes.
另一种选择是使用 javascript 添加您需要的所有额外标记。已经有一些 jquery 插件可以执行此类操作：
http://daverupert.com/2010 /09/lettering-js/
Another option would be to use javascript to add in all the extra markup you need. There are some jquery plugins that do this type of thing already:
http://daverupert.com/2010/09/lettering-js/
使用 CSS3 渐变，您可以使用纯 css 而无需 javascript 来完成此操作。主要思想是创建一个渐变，其中您想要的框颜色是纯色到某个色标，然后渐变是透明的。您必须根据文本的字体大小和字母间距来计算色标。然后将渐变应用于文本元素的伪类，瞧。
下面是我为 span 元素创建的示例，其中包含为组织筹集的资金金额。每个数字周围都需要一个粉红色的框。渐变如此复杂的原因是因为我只在每 3 位数字后重复一次，因为每 3 位数字都有一个逗号需要位于框外，因此需要额外的间隙。如果您在每个字符后重复，它可能会简单得多，但既然您提到了里程表，我想我会分享这种方法。您还可以使用更多浏览器前缀扩展这些渐变，使其在 IE、opera 等中工作。
Using CSS3 gradients you can do this with pure css and no javascript. The main idea is to create a gradient where the box color you want is a solid color to a certain color stop, and then the gradient is transparent. You have to calculate the color stops in coordination with the font-size and letter-spacing of the text. Then apply the gradient to a pseudo class of the text's element and voila.
Here's an example I created for a span element that contained the amount of money raised for an organization. Each number needed a pink box around it. The reason the gradient is so complicated is because I made it only repeat after every 3 digits, since every 3 digits there was a comma that needed to be outside of the boxes and thus required an extra gap. If you are repeating after every character it can be much simpler, but figured I'd share this approach since you mentioned an odometer. You can also extend these gradients with more browser-prefixes to make it work in IE, opera, etc.
如果不将每个字母包装在可设置样式的元素中，我看不到在 HTML 中执行此操作的方法。
I can't see a way to do this in HTML without wrapping each letter in an element that you can style.
你可以创建十张 gif，每个数字（你说的是统计计数器）一张，看起来就像你想要的那样。加载页面时，使用 javascript 将字符串拆分为数组，然后循环遍历该数组，并将每个字符替换为该数字对应的 gif。
You could create ten gifs, one for each number (you said stat counter) that look the way you want them. When you load the page, use javascript to split your string into an array, then loop through it and replace each character with the corresponding gif for that number.
好吧，当然可以翻转它并使用字体（通过@font-face) 包含方框内的字母。
Well, it's certainly possible to flip this around and use a font (via @font-face) that has boxed-in letters.
我喜欢 DMTinter 的答案，但它比必要的要长（加上它已经有 7 年历史了） - 这是一个快速而简单的示例 css我在我的页面上使用：
重要的是
repeating-linear-gradient()。我只是进行了反复试验，得到了与背景很好对齐的值13.5px和14.5px。I liked DMTinter's answer but it was longer than necessary (plus it's 7 years old) - here's a quick and simple example css that I'm using on my page:
The important thing is
repeating-linear-gradient(). I just did trial and error to arrive at the values13.5pxand14.5pxas lining up with the background well.