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

(HTML)假设我有固定宽度的容器。 其中一些标题将长于一行。 我想隔离这些线并对每一行分开。 有没有办法用JavaScript来计算航向到下一行的位置,例如在每条线周围放置一个跨度?

Hacky and dirty:在相同的容器中使用char-by-char呈现相同的字符串,直到它不适合为止,然后将此字符串包装在 ,重复。

 $(function(){ $h = $('.fixed').find('h3'); $h.each(function(i,e){ var txt = $(e).text(); $th = $('

').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(); } $('').text(ph).appendTo($(e)); $th.text(shc.pop()); } } $th.remove(); }) });

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

当然,这有助于此。

我写了一个有点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 )。

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