代码之家 › 专栏 › 技术社区 › Andy Li

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

css-selectors css html javascript

Andy Li · 技术社区 · 16 年前

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

4 回复 | 直到 14 年前

Kobi 6 年前

有趣。您可以使用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
});

边缘案例:我没有在类改变单词大小或宽度的地方进行测试。结果可能会大错特错。

这就是它的作用: https://jsbin.com/piwizateni/1/edit?html,css,js,output