如何选择第 n 行文本 (CSS/JS) [英] How to select nth line of text (CSS/JS)

问题描述

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

How to select and apply style on a specific line of text? Like the CSS pseudo-element :first-line, but I want to select any line, not limited to the first.

看来只用CSS是做不到的……反正我不介意用JS解决.

It seems that it can't be done by using only CSS... Anyway I don't mind a JS solution.

更新:

嗯，其实这只是为了兴趣.我正在尝试实现诸如突出显示段落的每一行(为了便于阅读，就像每个人对表格行所做的那样)...

Well, actually it's only for interest. I'm trying to achieve something like highlighting every even row of a paragraph (for readability, like what everyone does for table rows)...

预格式化文本，如:

<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>

...对我来说没问题，但是如何知道在哪里拆分?即使给出了段落的宽度，也很难确定...

...it is ok for me, but how to know where to split? Even if the width of paragraph is given, it is still hard to determine...

推荐答案

有趣.你可以用 JavaScript 做类似的事情:

Interesting. You can do something like that with 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 包装每个单词，并在窗口调整大小时根据 span 的位置添加一个类.我确信它可以更有效地完成，但它可以作为概念证明.当然，对于偶数/奇数行，你可以简化代码.

Basically, we wrap each word with a span, and add a class based on the position of the span, whenever the window resizes. I'm sure it can be done more efficiently, but it works as a proof of concept. Of course, for even/odd lines, you can simplify the code.

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

Edge cases: I didn't test it where the class changes the size or width of the words. It may end up very wrong.

它在行动:https://jsbin.com/piwizateni/1/edit?html,css,js,输出

这篇关于如何选择第 n 行文本 (CSS/JS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！