x字符后更改CSS [英] Change CSS After x Characters

问题描述

我在 td 中有一个文本字符串，如下所示:

I have a text string inside a td, as below:

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

我想做的是更改前七个字符后所有字符的字体大小.现在我知道我可以执行以下操作:

What I want to be able to do is change the font size of all the characters after the first seven. Now I know I could do the following:

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

不幸的是，我无法做到这一点，因为这是从 php while 函数生成的表的一部分，而实现此目标的唯一方法是使用 CSS nth-child()或类似的代码，因为它仅出现在一行中.我认为 PHP 解决方案不起作用.

Unfortunately I can't do that, as this is part of a table generated from a php while function, and the only way to target this is by using CSS nth-child() or similar, as it only occurs in one row. I do not think a PHP solution would work.

那么我该如何定位呢?我基本上是在寻找可以做以下事情的东西:

So how can I target this? I'm basically looking for something which would do the following:

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

此外，如果上述操作不可行，则可以选择将不同的 CSS 应用于前七个字符，然后将 nth-child 应用于整个 td ，将被功能覆盖以将 CSS 添加到前七个.

Also, if the above isn't possible, alternatively an option would be to apply a different CSS to the first seven characters, and apply the nth-child to the whole td, which will be overridden by the function to add CSS to the first seven.

首选CSS解决方案，欢迎使用JS/jQuery.如果需要更多信息，请发表评论，我会尝试添加.

CSS solution preferred, JS/jQuery welcome. If more information is needed, please comment and I will try and add.

推荐答案

使用纯CSS，我认为这是不可能的.CSS适用于元素和属性，而元素内的文本都不是这些.

Using pure CSS I'd say this is not possible. CSS works on elements and attributes, and text inside an element is neither of those.

但是由于您也对jQuery满意，因此请按以下步骤进行操作:

But since you're also OK with jQuery, here goes:

$("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位剪切，然后再添加额外的标签.

Short explanation: get the text for every td, cut at position 7, and put it back in with extra added tags.

这篇关于x字符后更改CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！