使用 :first-line 伪元素作为 jQuery 选择器

Question

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

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

Answer 1

由于您无法选择伪元素本身，您可以复制 , 的行为:first-line来确定文本。我写了一个快速的 JS 函数，类似于@Kevin B 建议的那个。如果只有一行文本，该函数最初确定元素的高度。一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。不考虑浏览器支持，这也应该没有任何跨浏览器样式不一致的情况。它似乎适用于任何类型的填充/边框。（例子）