通过javascript检测浏览器换行

首先我必须承认，我认为这将是一项艰巨的任务，因为无法通过任务浏览器告诉您自动换行符发生在何处。

我创建了一个解决方案，首先将每个单词包装在一个范围内，然后遍历所有范围以确定它们在容器中的最高位置。然后，它构建一个行起始和结束跨度的索引数组，并将单词跨度的每一行都包装在一个环绕跨度中。

可能的局限性：

• 在每个跨度末尾添加的空格可能会导致跨度中断到可能不会出现文本的新行。
• 不知道换行后是否需要删除每个单词跨度。（非常简单的mod）
• 假设容器中除文本外没有其他html
• 如果多个容器需要将一些额外的工作变成一个插件
• 单词的正则表达式在空间上很简单。可能需要其他正则表达式来重复使用空格

HTML：

<div id="content">Lorem Ipsum<div>

CSS：

#content{ position:relative}

JS：

var $cont = $('#content')var text_arr = $cont.text().split(' ');for (i = 0; i < text_arr.length; i++) {    text_arr[i] = '<span>' + text_arr[i] + ' </span>';}$cont.html(text_arr.join(''));$wordSpans = $cont.find('span');var lineArray = [],    lineIndex = 0,    lineStart = true,    lineEnd = false$wordSpans.each(function(idx) {    var pos = $(this).position();    var top = pos.top;    if (lineStart) {        lineArray[lineIndex] = [idx];        lineStart = false;    } else {        var $next = $(this).next();        if ($next.length) { if ($next.position().top > top) {     lineArray[lineIndex].push(idx);     lineIndex++;     lineStart = true }        } else { lineArray[lineIndex].push(idx);        }    }});for (i = 0; i < lineArray.length; i++) {var start = lineArray[i][0],    end = lineArray[i][1] + 1;if (!end) {    $wordSpans.eq(start).wrap('<span >')} else {    $wordSpans.slice(start, end).wrapAll('<span >');}

}