如何选择第n行文本(CSS/JS)

Question

如何在特定文本行上选择和应用样式？像CSS伪元素:第一行,但我想选择任何行,不限于第一行.

似乎只能通过使用CSS来完成...无论如何我不介意JS解决方案.

---

更新:

嗯,实际上它只是为了兴趣.我正在努力实现像突出显示段落的每一行(为了可读性,就像每个人对表行所做的那样)......

预格式文本如:

<p>
<span class='line1'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do </span>
<span class='line2'>eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </span>
<span class='line3'>minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </span>
<span class='line4'>ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </span>
<span class='line5'>voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur </span>
<span class='line6'>sint occaecat cupidatat non proident, sunt in culpa qui officia </span>
<span class='line7'>deserunt mollit anim id est laborum.</span>
</p>

...对我来说没关系,但如何知道在哪里拆分？即使给出了段落的宽度,仍然很难确定......

Answer 1

有趣.当然,您可以使用JavaScript执行类似的操作:

$(function(){ 
  var p = $('p'); 
  var words = p.text().split(' '); 
  var text = ''; 
  $.each(words, function(i, w){
                   if($.trim(w)) text = text + '<span>' + w + '</span> ' }
        ); //each word 
  p.html(text); 
  $(window).resize(function(){ 

    var line = 0; 
    var prevTop = -15; 
    $('span', p).each(function(){ 
      var word = $(this); 
      var top = word.offset().top; 
      if(top!=prevTop){ 
        prevTop=top; 
        line++; 
      } 
      word.attr('class', 'line' + line); 
    });//each 

  });//resize 

  $(window).resize(); //first one
});

基本上,我们用span包装每个单词,并在窗口调整大小时根据跨度的位置添加一个类.我确信它可以更有效地完成,但它可以作为概念证明.当然,对于偶数/奇数行,您可以简化代码.

边缘情况:我没有测试类改变单词大小或宽度的地方.它可能最终会出错.

这是在行动:http://jsbin.com/udehu3

Answer 2

如果每一行都是单独的,<li>或者<p>您可以使用CSS选择它.

:第n个孩子(N)

取自sitepoint.com,适用于Opera 9.5 +,Safari 4 +,FF3.5 +

描述

这个伪类根据它们在父元素的子元素列表中的位置来匹配元素.伪类接受参数N,其可以是形式为a + b的关键字,数字或数字表达式.有关更多信息,请参阅了解:nth-child伪类表达式.

如果N是数字或数字表达式,则:nth-​​child(N)匹配文档树中以N-1个兄弟为前缀的元素.

以下示例选择器是等效的,将匹配奇数表行:

tr:nth-child(2n+1) {
  ? declarations
}
tr:nth-child(odd) {
  ? declarations
}

此示例选择器将匹配任何表的前三行:

tr:nth-child(-n+3) {
  ? declarations
}

此示例选择器将匹配其父元素的第一个子元素的任何段落:

p:nth-child(1) {
  ? declarations
}

当然,这相当于选择器p:first-child.

例

此示例选择器将匹配奇数表行:

tr:nth-child(odd) {
  ? declarations
}

你也可以使用jQuery.

Answer 3

如果有人感兴趣，我找到了一个名为lining.js的 JavaScript 库来帮助解决这个问题。它启用了这样的 CSS 语法：

<style>
  .poem .line[first] { /* `.poem::first-line`*/ }
  .poem .line[last] { /* `.poem::last-line` */ }
  .poem .line[index="5"] { /* `.poem::nth-line(5)` */ }
  .poem .line:nth-of-type(-n+2) { /* `.poem::nth-line(-n+2)` */ }
  .poem .line:nth-last-of-type(2n) { /* `.poem:::nth-last-line(2n)` */ }
</style>

( GitHub )