使用Javascript/jQuery来确定一个标题到下一行的位置?

黑与脏:在同一个容器中逐字符呈现相同的字符串,直到它不合适为止,然后获取该字符串并将其包装在 <span> ,重复。

$(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();
    })
});

当然还有, fiddle 为了这个。

我写了一个有点老套的自定义选择器。此选择器克隆对象,然后为克隆提供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;
};

你可以这样称呼:

$('h1:multiLine')

注意,你不应该包装 h* 元素 span 标记,因为内联元素(例如。 跨度 h1 ).

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