Question

（HTML）假设我有固定宽度的容器。其中一些标题将长于一行。我想隔离这些线并对每一行做单独的事情。有没有办法用JavaScript来计算标题到达下一行的位置，例如在每一行周围放一个跨度？

Answer 1

Hacky and dirty：在相同的char-by-char容器中呈现相同的字符串，直到它不适合为止，然后取出该字符串并将其包装在<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();
    })
});

使用方面存在一些限制。例如，除了纯文本之外，标题不应包含任何内容 - 任何HTML标记都将被删除。

当然，fiddle就是这样。

Answer 2

我写了一个略带hacky的自定义选择器。此选择器克隆对象，然后为克隆提供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元素，因为内联元素（例如span）可能不包含块级元素（例如h1）。

修改另请注意，如果标题中包含图像，或者更改标题中任何文本的高度，则可能无法使用此功能。最好不要依赖这种检测 - 仅将其用于增强。

使用Javascript / jQuery确定标题中断到下一行的位置？

2 个答案: