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

2019-09-17 05:37:31 阅读：156 来源： 互联网

标签：html javascript css css-selectors

如何在特定文本行上选择和应用样式？
像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>

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

解决方法:

有趣.当然,您可以使用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

标签：html,javascript,css,css-selectors
来源： https://codeday.me/bug/20190917/1808839.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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