使用Javascript/jQuery确定标题在何处中断到下一行？

（HTML）假设我有固定宽度的容器。其中一些标题将超过一行。我想隔离这些行，并对每一行执行单独的操作。有没有一种方法可以使用JavaScript计算标题在哪里断开到下一行，例如在每一行周围放置一个跨距？

我已经编写了一个稍微粗糙的自定义选择器。此选择器克隆对象，然后为克隆对象提供HTML

A

。然后比较原始和克隆的高度。如果它们相同或副本更大，选择器将失败。如果副本小于原始副本（即，我们假定行已换行），选择器将通过：

$.expr[':'].multiLine = function(obj) {
    var $this = $(obj), 
        copy = $this.clone().html('A').insertAfter($this)
        ret;

    ret = (copy.height() < $this.height());
    copy.remove();

    return ret;
};

注意：您不应该将

h*

元素包装在

span

标记中，因为内联元素（例如

span

）可能不包含块级元素（例如

h1

）

---

编辑还要注意，如果标题中有图像，或者更改标题中任何文本的高度，则此操作可能无效。最好不要依赖这种检测——只用于增强功能。

黑客和肮脏：在同一容器中逐字符呈现相同的字符串，直到不合适为止，然后将此字符串包装在

中，重复

$(function(){
    $h = $('.fixed').find('h3');
    $h.each(function(i,e){
        var txt = $(e).text();
        $th = $('<h3 />').prependTo($(e).parent());
        var lh = $(e).text('X').height();
        $(e).text('');
        while (txt.length > 0) {
            $th.text($th.text() + txt[0]);
            txt = txt.slice(1);
            if (($th.height() > lh) || (txt.length <= 0)) {
                var shc = $th.text().split(' ');
                var ph = shc.slice(0,-1).join(' ')+' ';
                if (txt.length <= 0) { ph += shc.pop(); }
                $('<span />').text(ph).appendTo($(e));
                $th.text(shc.pop());
            }
        }
        $th.remove();
    })
});

$（函数（）{
$h=$（'.fixed'）。查找（'h3'）；
每个$h（功能（即，e）{
var txt=$（e.text（）；
$th=$（''）.prependTo（$（e.parent（））；
var lh=$（e）.text（'X'）.height（）；
$（e）.文本（“”）；
而（txt.length>0）{
$th.text（$th.text（）+txt[0]）；
txt=txt.slice（1）；
如果（$th.height（）>lh）| |（txt.length）只要不使用单空格字体，那么如果您尝试基于字符数的方法，您将得到最好的估计值。也许您可以使用元素hight
$（“#您的选择器”）。first（）.css（'height'））；
并删除字符，直到它适合您的一行高度。实际上，我不打算在
中包装标题，我计划检测每行上有哪些文本，然后在
中包装每行文本，也就是说，
这是一个非常长的标题
它可能有点粗糙，但我可以别想别的办法，这很有创意。我不确定这是否会对性能产生影响，但我会试试看。谢谢！
$(function(){
    $h = $('.fixed').find('h3');
    $h.each(function(i,e){
        var txt = $(e).text();
        $th = $('<h3 />').prependTo($(e).parent());
        var lh = $(e).text('X').height();
        $(e).text('');
        while (txt.length > 0) {
            $th.text($th.text() + txt[0]);
            txt = txt.slice(1);
            if (($th.height() > lh) || (txt.length <= 0)) {
                var shc = $th.text().split(' ');
                var ph = shc.slice(0,-1).join(' ')+' ';
                if (txt.length <= 0) { ph += shc.pop(); }
                $('<span />').text(ph).appendTo($(e));
                $th.text(shc.pop());
            }
        }
        $th.remove();
    })
});