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

Ответ 1

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

Вам нужно создать клон элемента, удалить оригинал, а затем переместить каждое слово обратно в исходный элемент. Если высота изменяется в любой точке, перед этим словом происходит разрыв строки. Это было бы довольно просто сделать с помощью $(el).text(), но он становится более сложным, если внутри него могут быть другие теги, а не только текст. Я попытался объяснить, как разбить его на node в этом поле ответа, но проще было просто создать плагин jQuery в jsFiddle. Ссылка здесь: http://jsfiddle.net/nathan/qkmse/ (Gist).

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

Ответ 2

Вот один из подходов. Примечание. Я не вижу идеального решения без использования моноширинных шрифтов. Уравнение с символами делает эту задачу намного проще.

• Символы равной ширины
• Рассчитать размер одного символа
• Рассчитать размер контейнера
• Найти символы в строке
• Найдите, где строка сломается (т.е. пробелы, тире и т.д.)
• Получить все индексы.

Посмотрите на jsfiddle для связанного html. Я не выполнил эту функцию. При вычислении индекса разрыва необходимо вводить дополнительные проверки. Сейчас он использует lastIndexOf (''), но это игнорирует, что следующий индекс может быть пробелом или текущим. Кроме того, я не учитываю других символов прерывания строки. Однако это должно стать отличной отправной точкой.

var text = $('#text').text(),                   // "lorem ipsum ... "
    len = text.length,                          // total chars
    width = $('#text').width(),                 // container width
    span = $('<span />').append('a').appendTo('#sandbox'),
    charWidth = span.width(),                  // add single character to span and test width
    charsPerRow = Math.floor(width/charWidth); // total characters that can fit in one row

var breakingIndexes = [], // will contain indexes of all soft-breaks
    gRowStart = 0,        // global row start index
    gRowEnd = charsPerRow;// global row end index

while(gRowEnd < len){
    var rowEnd = text.substring(gRowStart, gRowEnd).lastIndexOf(' '); // add more checks for break conditions here
    breakingIndexes.push(gRowStart + rowEnd); // add breaking index to array
    gRowStart = gRowStart + rowEnd + 1; // next start is the next char
    gRowEnd = gRowStart + charsPerRow;  // global end inxex is start + charsperrow
}

var text2 = $('#text2').text();           // "lorem ipsum ... " now not width bound
var start = 0, newText = '';
for(var i=0; i < breakingIndexes.length; i++){
    newText += text2.substring(start, breakingIndexes[i]) + '<br />'; // add hard breaks
    start = breakingIndexes[i]; // update start
}

$('#text2').html(newText); // output with breaks

http://jsfiddle.net/Y5Ftn/1/

Ответ 3

это мой script, который принимает текст, а затем делает каждую строку span

CSS

    margin: 0;
        padding: 0;
    }

    .title{
        width: 300px;
        background-color: rgba(233,233,233,0.5);
        line-height: 20px;
    }

    span{
        color: white;
        background-color: red;
        display: inline-block;
        font-size: 30px;
    }

    a{
        text-decoration: none;
        color: black;
    }

HTML

<div class="title">
        <a href="">SOME TEXT LONG TEXT ANDTHISISLONG AND THIS OTHER TEXT</a>
    </div>

JS

$(function(){

        $(".title").find("a").each(function(){

            var $this = $(this);
            var originalText = $this.text();
            $this.empty();

            var sections = [];

            $.each( originalText.split(" "), function(){
                var $span = $("<span>" + this + "</span>");
                $this.append($span);

                var index = $span.position().top;

                if( sections[index] === undefined ){
                    sections[index] = "";
                }

                sections[index] += $span.text() + " ";
            });

            $this.empty();

            for(var i = 0; i< sections.length; i++){
                if( sections[i] !== undefined ){
                    var spanText = $.trim(sections[i]);                     
                    $this.append("<span>" + spanText + "</span>");
                }
            }

        });

    });

Вы должны включить jQuery.

Ответ 4

Я не знаю ни одного встроенного jQuery функции javascript для этого. Вы могли бы, однако, сделать это сами, но это будет потенциально медленным, если у вас будет много текста.

В теории вы можете убедиться, что высота установлена ​​на автоматическую, удалите текст, а затем слово за словом снова вставьте его. При изменении высоты вы удаляете последнее слово и вставляете свой элемент dom. Опять же, это будет медленно, если будет много текста, и лучший способ сделать это - не изменять исходный элемент, а делать это в другом элементе, который можно было бы скрыть, а затем заменить исходный элемент на завершение. Таким образом, ваш пользователь не увидит, что содержимое исчезнет, ​​а затем вернется словом.

Другим способом было бы использовать аналогичный принцип и начать с пустого элемента с одинаковым размером с auto auto и вставить новый символ и пробел, пока вы не получите новую строку. Оттуда вы можете использовать это в качестве приближения к вышеупомянутой технике, или вы можете вслепую добавить длину каждой строки до тех пор, пока не найдете новую строку, учитывая ширину вашего элемента dom. Этот метод работает лучше с моноширинными шрифтами, хотя, где он используется только в качестве приближения.

Тем не менее, есть способ измерить текст, используя холст, но это может быть экстремальным. Теоретически это было бы, создать элемент canvas, получить контекст, установить все свойства шрифта, а затем использовать метод context.measureText(). Пример его использования можно найти здесь.

Ответ 5

Не уверен, что именно ваш вариант использования, но http://code.google.com/p/hyphenator/ может быть решением вашей проблемы или если вы вникнете в hyphenator.js исходный код, вы можете найти код, который вы ищете.

Ответ 6

Я думаю, было бы легче обнаружить с помощью регулярного выражения - гораздо меньше кода, сохраняя эффективность.

Вот что-то, что сработало для меня:

if ((/(\r\n|\n|\r)/.test($(this).val()))) {
    alert('there are line breaks here')
}

Я не уверен, что это будет работать с вашими сломанными строками, но оно работает для обнаружения строк с помощью jQuery.

Ответ 7

В качестве альтернативы вы можете сравнить ширину текстового блока с его родительской шириной. Если блок составляет не менее 98% от ширины его родителя, он уверен, что он сломает