使用：作爲jQuery選擇器的第一行僞元素

我知道我可以使用CSS僞裝元素來改變任何文本塊中第一行的樣式（如本演示中所示：http://jsfiddle.net/6H8sy/）。所以第一行可以找到並定位。使用：作爲jQuery選擇器的第一行僞元素

我想知道是否有什麼辦法，實際上選擇該文本重用。像$(':first-line')（它不工作，因爲它）。

2014-01-13 Yuriy Galanter

CSS僞選擇器在技術上並不是DOM的一部分，因此不能被JavaScript操縱。 – Blazemonger

類似於用鼠標突出顯示？ – Johnston

@Johnston不是真的，而是選擇一個節點供以後重用 –

既然你無法選擇僞元素本身，你可以複製的:first-line的行爲，以確定文本。我寫了一個快速的JS函數，類似於一個@Kevin B suggest。如果只有一行文本存在，函數最初確定元素的高度。然後使用for循環刪除文本節點中的單詞，直到元素的新高度等於初始高度。該函數然後返回first-line文本。

Example Here - 該函數在onLoad上運行，因此如果窗口寬度改變，文本顯然不會匹配first-line。您可以通過在屏幕大小調整時運行該功能來輕鬆解決此問題。

JavaScript函數 - 沒有jQuery的

function first_line(element) { 
    var el = document.getElementById(element), cache = text = el.innerHTML; 
    el.innerHTML = 'a'; var initial = el.offsetHeight; el.innerHTML = cache; 
    arr = text.split(" "); 
    for (var i = 0; i < arr.length; i++) { 
     text = text.substring(0, text.lastIndexOf(" ")); 
     if (el.offsetHeight == initial) { 
      var temp = el.innerHTML; 
      el.innerHTML = cache; 
      return temp; 
     } 
     el.innerHTML = text; 
    } 
}

我不知道如果我重新發明輪子在這裏，還是不行;但這確實有用。我不知道有任何jQuery或內置的JS能夠實現這一點。無視瀏覽器支持，這應該也可以在沒有任何跨瀏覽器樣式不一致的情況下工作。它似乎使用任何類型的填充/邊界。 (example)

來源

2014-01-14 06:08:00

我對你的代碼印象深刻。事實上，我重新將它作爲我在這裏的答案的一部分（以爲你可能想知道）：http://stackoverflow.com/questions/28845450/adding-the-link-that-makes-the -paragraph崩到了，最後visbile-線的個 – whiterabbit25

我想這個問題＃2是你在找什麼：

getting the first line of text in an element jquery

var first_line = $("#element") 
         .contents() 
         .filter(function() { 
          return !!$.trim(this.innerHTML || this.data); 
         }) 
         .first();

來源

2014-01-13 17:36:13

謝謝，但那不完全是。在這個例子中，元素的內容由單獨的節點組成（textnode，span，div等）。在我的情況下，它只是一個文本塊 –

使用：作爲jQuery選擇器的第一行僞元素

回答

相關問題