如何使用 JavaScript 和 CSS 選擇性地設定特定文字行的樣式？

使用CSS 和JavaScript 選擇特定文字行並設定其樣式

問題：

如何選擇性地定位和樣式化文字行文件中的特定文字行？ :first-line CSS 偽元素允許您定位第一行，但是有沒有辦法選擇任意行？

JavaScript 解決方案：

Since CSS單獨無法實現這一點，需要 JavaScript 解決方案。考慮以下方法：

$(function() {
  var p = $('p');
  var words = p.text().split(' '), text = '', line = 0;
  $.each(words, function(i, w) {
    if ($.trim(w)) text += '<span>' + w + '</span> ';
  });
  p.html(text);
  $(window).resize(() => {
    var prevTop = -15;
    $('span', p).each(function() {
      var top = $(this).offset().top;
      if (top !== prevTop) { prevTop = top; line++; }
      $(this).attr('class', 'line' + line);
    });
  });
  $(window).resize();
});

解釋：

此解決方案動態地將每個單字包裝在一個span 元素中，並根據其為每個span分配一個線類。位置。調整視窗大小時，腳本會調整線條類別以確保正確識別每條線。

如何使用：

1. 包含 jQuery 函式庫。
2. 將文字包裝在帶有 ID 或類別的段落元素中以供選擇。
3. 新增為您的頁面提供了腳本。
4. 調整視窗大小以查看應用於每個跨度元素的線類。

其他註解：

• 調整特定行選擇的邏輯，例如只選擇偶數或奇數行。
• 考慮類別改變字大小或寬度的潛在問題。
• 檢查提供的 JSBin 演示以取得工作範例。

以上是如何使用 JavaScript 和 CSS 選擇性地設定特定文字行的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！