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

小编典典

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

html

如何在特定的文本行上选择和应用样式？类似于CSS伪元素：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>

…对我来说还可以，但是如何知道在哪里拆分呢？即使给出段落的宽度，仍然很难确定…

阅读 667

2020-05-10

共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
});

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

边缘案例：我没有在类更改单词的大小或宽度的地方进行测试。它可能最终会非常错误。

2020-05-10