Question

如何在特定文本行上选择和应用样式？与CSS pseudo-element :first-line类似，但我想选择任何一行，不限于第一行。

似乎只能通过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）

Answer 4

如果我理解正确，您希望能够通过CSS将样式应用于文档中的特定行。例如：将第5行加粗。

这是不可能的 - CSS不是面向行，而是面向DOM元素。因此，要实现您的目标，您必须将您的行包装在＆lt; span＆gt;内。（或者＆lt; div＆gt;）元素然后将样式应用于该元素。

CSS不是面向行的，因为行号是虚幻的：行号会根据屏幕分辨率，浏览器窗口的宽度，浏览器中定义的默认字体等而改变。因此，基于行号的样式将给出你有问题的结果。

Answer 5

如果将CSS限制为文本和背景色，则可以使用CSS来实现此效果：

body {
  font-size: 16px;
  line-height: 20px;
}

.text {
  background: linear-gradient(to bottom, crimson 20%, coral 20% 40%, seagreen 40% 60%,
                              dodgerblue 60% 80%, mediumslateblue 80%);
  background-size: 100px 100px;
  background-position: top left;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.background {
  background: linear-gradient(to bottom, white 50%, #eee 50%);
  background-size: 100px 40px;
  background-position: top left;
}

<div class="background">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio.
    Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere ac, pharetra id justo. Mauris odio est, imperdiet eget sollicitudin non, aliquet in nulla. Aliquam erat volutpat. Pellentesque bibendum tellus nibh. Ut consequat sem sit amet quam
    tristique ut tempor massa rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum.
    Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere ac, pharetra id justo. Mauris odio est, imperdiet eget sollicitudin non, aliquet in nulla. Aliquam erat volutpat. Pellentesque bibendum tellus
    nibh. Ut consequat sem sit amet quam tristique ut tempor massa rhoncus.
  </div>
</div>

首先，我们使用linear-gradient创建一个background，以达到stripes的效果。
我们在此将line-height设置为20px，这将简化示例。
我们要确保背景和文本行对齐，因此我们设置了background-size。如果我们有5条彩色条纹，且每条线为20px，则背景高度应为100px（宽度在这里无关紧要）。
最后，要给字母而不是背景加上颜色，我们使用了一个相对较新的CSS属性-background-size。这样会将背景绘制为与文本内容相同的形状。我们仍然需要设置color: transparent，因为没有它，文本仍然会在背景上涂成黑色。

如何选择第n行文本（CSS / JS）

5 个答案: