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

问题描述

如何在特定文字行上选择和应用样式？
像 CSS伪元素：第一行，但我想选择任何行，不限于第一行。

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, of course:

$(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.

这里是操作中： http://jsbin.com/udehu3

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