如何在 CSS 和 JavaScript 中定位和设置特定文本行的样式？

如何在 CSS/JS 中定位和样式化单行文本

使用 CSS 的 :first-line 伪元素来选择和样式化特定的文本行可能看起来很简单，但是如果您需要定位文本中的任何行怎么办？

虽然纯 CSS 不提供选择任意行的方法，但 JavaScript可以填补空白。

JavaScript 解决方案

使用 JavaScript 的一种方法是将每个单词包装在 span 元素中，并根据 span 在文本中的位置分配一个唯一的类。代码如下：

$(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
});

此代码本质上将文本分解为单独的单词，使用 CSS 类将它们包装在 Span 中，并在调整浏览器窗口大小时根据 Span 的行位置分配类名称。

应用程序

要突出显示段落的每个偶数行，您可以修改代码：

$('span.even, span.odd').css({
  'background-color' : '#ccc'
});

注意事项

需要注意的是，边缘情况（例如影响字大小或宽度的类名更改）可能会影响脚本的准确性。

以上是如何在 CSS 和 JavaScript 中定位和设置特定文本行的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！