Обнаружение обернутых браузером строк через javascript

Мне нужен javascript для обнаружения каждой строки, завернутой в браузер, и ее переноса в .

Я наткнулся на статьи, рассказывающие об измерении оси y каждого слова, но не видел твердого решения.

Вот что я до сих пор. Смотрите на Jsfiddle .

HTML

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus condimentum metus, et placerat augue rutrum vitae. Donec arcu lorem, eleifend at elementum eget, consectetur vel lacus. Nam euismod iaculis varius. Phasellus sed dui diam. Nullam facilisis, diam sit amet sagittis cursus, metus tortor gravida erat, ut fringilla risus ipsum eu nisl.

JS / JQuery

 (function($){ $.fn.inlinebackground = function() { $.each(this, function(i,t) { var split = $(t).html().split(' '); var output = ''; $.each(split, function(i,o){ output += ''+o+''; if (i < (split.length - 1)) { output += '
'; } }); $(t).html(output); }); } })(jQuery); /* End Plugin Code */ // Run the plugin on .news-caption $(function(){ $('.inline-bg').inlinebackground(); });

CSS

 .inline-bg { width: 200px; line-height:3em; } .inline-bg span.line { background-color: black; color: white; padding: 15px; } 

Прежде всего, я должен признать, что это будет непростой задачей, так как нет способа бросить вызов браузеру, чтобы рассказать вам, где происходят разрывы линий автоматического обтекания.

Я создал решение, которое сначала обертывает каждое слово в промежутке, затем проходит через все промежутки, чтобы определить их верхнее положение в контейнере. Затем он создает массив индексов строк начала и конца строки и обертывает каждую строку интервалов слов в интервале обертывания.

ДЕМО: http://jsfiddle.net/KVepp/2/

Возможные ограничения:

  • Пространство, добавленное в конце каждого интервала, возможно, может привести к тому, что промежуток будет разбит на новую строку, где текст не может быть.
  • Не уверен, что каждый слот должен быть удален после того, как строки будут завернуты. (очень простой мод)
  • Не допускается использование другого html в контейнере, кроме текста
  • Требуется небольшая дополнительная работа для превращения в плагин, если это необходимо для нескольких контейнеров
  • regex для слов просто разбивается в пространстве. Вероятно, потребуется дополнительное регулярное выражение для повторяющихся пространств

HTML:

 
Lorem Ipsum

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] = '' + text_arr[i] + ' '; } $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; /* no end value pushed to array if only one word last line*/ if (!end) { $wordSpans.eq(start).wrap('') } else { $wordSpans.slice(start, end).wrapAll(''); } 

}