计算字母数量并应用CSS

Question

各位，这个问题与以下的问题有关 > 如何应用CSS到带括号的段落中的单词

由于数据库不在我的控制下，因此我正在寻找一些替代方案。在CSS中，是否有一种方法可以计算句子中字符的数量，然后将CSS应用于其余字符？

- Sagar Raj

---

根据我了解的情况：不，你需要 JavaScript。 - caramba

在CSS中，除了text-*属性和::first-letter和::first-line伪元素提供的内容外，你真的不能做太多关于文本的操作。 - BoltClock

你有添加JavaScript到网站的权限吗？如果有，你可以使用JavaScript str.lengh，然后使用JQuery.addClass()来添加一个类以应用CSS。 - Chadwick13

你可以使用 ch 计算文本。 - zer00ne

不，CSS无法读取元素的内容或操作文档对象模型。 - Nick

Answer 1

1ch = “0”（零）的宽度

1ex = “x”（小写）的高度

ex似乎更准确。就像@BoltClock♦所说，它不是计数，而是一种限制字符数量的方法。我会尝试“用剩下的CSS做些事情”，但OP没有具体说明，坦白地说，我不知道。

更新

我能想到的最好的办法是将剩余的文本放在:after中，然后样式化内容。

p.fifteen { max-width: 15ex; outline: 1px solid red; }
p.seventeen { max-width: 15ch; outline: 1px solid red; }
p.fifteen:after { content: 'fghijklmnop'; font-size: 36px; color: red; }
p.seventeen:after { content: 'hijklmnop'; font-variant: small-caps; font-weight: 900; }

<p class="fifteen">123456789abcde</p>
<p class="seventeen">123456789abcdefg</p>

- zer00ne

---

那不是在计算文本。那是根据0字形的宽度设置长度。通过设置长度，你无法进行任何“计数”。 - BoltClock

是的，它不是在计数，但这是一种控制文本长度的方法。 - zer00ne

@zer00ne - 问题是，如果我想为abcdef应用不同的CSS，例如更大的字体大小，我该怎么做？ - Sagar Raj

@SagarRaj 好的，它不是完美的，但这是我能想到的最好的。 - zer00ne

Answer 2

你需要使用JavaScript，只需像这样使用somestring.length：

var someString= 'abc';
var str = someString.length;
console.log(string);

结果：3

查看更多信息，请访问http://www.quirksmode.org/js/strings.html

或使用jQuery方法：

Html

<div id="selector">Some Text</div>

jQuery

$('#selector').text().length;

- Kudos