在x个字符后更改CSS

Question

我有一个文本字符串在 td 标签内，如下所示：

<td>This is a long line</td>

我希望能够改变前七个字符之后所有字符的字体大小。现在我知道可以这样做：

<td>This is<span class="different"> a long line</span></td>

很遗憾，我做不到这一点，因为这是由php while函数生成的表格的一部分，唯一的方法是使用CSS nth-child()或类似方法来定位它，因为它只出现在一行中。我认为PHP的解决方案行不通。

那么我该如何定位它呢？我基本上在寻找以下内容：

#table2 td:nth-child(6) characters(n+7) { font-size: 8px; }

此外，如果上述方法不可行，则可以选择为前七个字符应用不同的CSS，并将nth-child应用于整个td，这将被函数覆盖以添加到前七个字符的CSS。更倾向于使用CSS解决方案，JS/jQuery也可以。如果需要更多信息，请留言，我会尽力补充。

- CalvT

---

唯一的方法是在第七个字符后将文本包装在一个元素中（就像您示例中的span一样）。CSS无法计算字符数。您可以使用JS或PHP来处理将文本包装在单独的包装元素中的操作。 - j08691

@j08691 可以让jQuery自动包装它们吗？ - CalvT

你可以使用jQuery选择<td>的内容，将第七个字符后的文本分割，并将第二部分包装在一个元素中。 - j08691

正如其他人所说，JS是你在这里的唯一希望。请查看lettering.js http://letteringjs.com/ - bezierer

Answer 1

使用纯CSS实现这个功能是不可能的。CSS是针对元素和属性进行操作的，而元素内部的文本则不属于这两者之一。

但是如果您也可以接受jQuery，那么请继续阅读：

$("td").each(function() {
  var text = $(this).text();
  var part1 = text.substring(0, 7);
  var part2 = text.substring(7);
  $(this).html(part1 + "<i>" + part2 + "</i>");
})

td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>This is a long line</td>
    <td>Short</td>
  </tr>
  <tr>
    <td colspan=2>Supermagically long line</td>
  </tr>
</table>

简要说明：获取每个td中的文本，截取第7个位置并添加额外的标签后再放回去。

- Peter B

Answer 2

使用jQuery可以像这样做：

With Jquery you can do something like this:

var rep = $('div').text().substring(0,7);
$('div').html(function(i,html){
  return html.replace(rep, '<span>'+rep+'</span>');
})

span {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>This is a long line</div>

- DaniP

Answer 3

很遗憾，没有::nth-letter选择器，但是css-tricks提供了一个不错的nth-everything概念（这更像是对标准的请求）。

这里有一个实现：https://github.com/FWeinb/nthEverything

你可以查看这个例子：

$(function() {
    $.fn.nthEverything();
});

div::nth-letter(1),div::nth-letter(2),div::nth-letter(3),div::nth-letter(4),div::nth-letter(5),div::nth-letter(6),div::nth-letter(7) {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/FWeinb/nthEverything/master/jquery.nthEverything.min.js"></script>
<div>asdf lkajsdflkjasdf</div>

这里没有实现 n+X，所以我不得不复制选择器。

- Dekel