Question

我知道我可以使用CSS :first-line伪elmenent来定位和更改任何文本块中第一行的样式（如本演示中所示：http://jsfiddle.net/6H8sy/）。因此，第一行可以找到并定位。

我想知道是否有任何方法可以选择该文本以供重用。像$(':first-line')这样的东西（它不能正常工作）。

Answer 1

由于您无法选择伪元素本身，因此您可以复制: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)

Answer 2

我想这个Stackoverflow问题就是你要找的东西：

getting the first line of text in an element jquery

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

使用：第一行伪元素作为jQuery选择器

2 个答案: