Обнаружить обернутые строки браузера с помощью JavaScript

Мне нужен javascript для определения каждой строки текста в браузере и ее переноса.<span class="line"></span>

Я наткнулся на статьи, в которых говорилось об измерении оси 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 += '<span class="line">'+o+'</span>';
                if (i < (split.length - 1)) {
                    output += '<br>';
                }
            });
            $(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; }

Ответы на вопрос(1)

Решение Вопроса

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

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

DEMO: http://jsfiddle.net/KVepp/2/

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

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

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] = '<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;

/* no end value pushed to array if only one word last line*/
if (!end) {
    $wordSpans.eq(start).wrap('<span class="line_wrap">')
} else {
    $wordSpans.slice(start, end).wrapAll('<span class="line_wrap">');
}
</span></span>

 timofey.com15 окт. 2012 г., 04:47
Спасибо за ответ. Это необерните последнее слово из вашего примера ... или если есть только одно слово.
 charlietfl15 окт. 2012 г., 05:19
ОК ... В Firefox, где я тестировал, он работает с количеством слов ... не в Chrome или IE. Надо будет немного подправить завтра. Это не тривиальная концепция, чтобы заставить все это работать.
 timofey.com15 окт. 2012 г., 04:56
м в хроме, но этоЭто так во всех браузерах. Посмотрите на источник HTML на вашем примере на jsfiddle.
 timofey.com15 окт. 2012 г., 06:10
Вы'я не правпроверить FF! Спасибо!!
 timofey.com15 окт. 2012 г., 04:58
Последняя работа »Ipsum «. не упаковка
 charlietfl15 окт. 2012 г., 05:38
сделал быстрое исправление последней строки, состоящей из одного слова. Отредактированная ссылка и код выше также. Кажется, работает в FF, Chrome и IEjsfiddle.net/KVepp/2
 charlietfl15 окт. 2012 г., 04:50
Не уверен, где вы видите, что последнее слово не переносится. Я никогда не думал только об одном слове. Придется вносить коррективы, завтра поздно вечером здесь. Кроме того, какой браузер? У меня нетЯ проверил этот кросс-браузер ... это очень ранние этапы и, возможно, потребуется корректировка.

Ваш ответ на вопрос