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

ли сделать так, чтобы jQuery / javascript определял, где строка разбита (чтобы соответствовать ограничениям ширины CSS), чтобы вставить элементы DOM перед началом новой строки?

 Marnix12 янв. 2011 г., 18:23
Вы ищете, где слово завернуто, или вы ищете<br>?
 Jacob12 янв. 2011 г., 18:42
Какой контент вы вставляете перед началом каждой строки?
 amosrivera12 янв. 2011 г., 18:34
какая строка является входной?
 Mild Fuzz13 янв. 2011 г., 10:23
@Marix ищет обертку. @amosrivera просто предложение, это заголовок. @ Джейкоб не уверен, что ты имеешь в виду? перед динамическим содержимым есть <h3> и <span>

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

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

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

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

Посмотрите на 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/

 Marnix13 янв. 2011 г., 13:36
Проблема действительно в том, что у многих персонажей разное пространство. Одна вещь, которую вы могли бы сделать, это взять1ex какcharWidth, Или, может быть (что сложнее) создать оценкуcharWidth, Но это зависит от языка, с помощью которого символ, скорее всего, будет в вашем тексте. Или, если перенос слов не то, что вы ищете, было бы неплохо взятьmax-char, как W, который является огромным персонажем. Или, может быть, увидеть это какGaussian функция с дисперсией?
 Suirtimed13 янв. 2011 г., 18:16
Я только что проверил это в IE 7 (корпоративный стандарт здесь :(), и он не правильно отформатировал, но в Chrome 8 он выглядит великолепно!
 Marnix13 янв. 2011 г., 21:23
Как я уже сказал, это не должно быть рассчитано на каждой строке. Хотя это выполнимо за полиномиальное время, это то, что вы не хотите. Создание оценки для языка, на котором вы работаете, является. Большинство естественных процессов гауссовские, так что было бы неплохо начать с них, или вы могли бы сделать это дискретным E [X], потому что число символов дискретно. «W» кажется хорошим персонажем, какmax-charпотому что это почти в каждом шрифте самый большой символ. Так что да, создание оценки лучше, чем просто взять «а» вSPAN.
 Josiah Ruddell13 янв. 2011 г., 16:55
@marnix - я не вижу ни одного из этих очень точных вычислений, потому что немоно-космические шрифты имеют разную ширину символов. Конечно, вы можете рассчитать ширину всех общих символов и рассчитать каждую строку на основе ширины отдельных символов. Это, однако, кажется ужасно неэффективным.
Решение Вопроса

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

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

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

 fabien16 дек. 2012 г., 13:53
эй, отлично работает, спасибо!
 Trass Vasston06 авг. 2012 г., 02:20
Работает из коробки - грубая сила на победу!
 Nathan MacInnes16 янв. 2012 г., 10:51
Почему люди понижают голос, не оставляя комментариев !?
 Steve Meisner24 авг. 2012 г., 01:34
Этоткомментарий адресует что-то подобное, он оборачивает каждую строку текста в промежуток (с уникальным классом!). Оно используетэтот плагин.

который берет текст, а затем делает каждую строку промежутком

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.

 Slevin23 янв. 2015 г., 09:44
ВАУ! Невероятно!

чтобы сделать это. Вы можете, однако, сделать это самостоятельно, но это будет потенциально медленно, если у вас много текста.

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

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

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

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

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

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

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

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

 streetlight13 февр. 2013 г., 14:14
Я только сделал предварительное тестирование на это, но я верю в это, да. Я знаю, что это определенно работает в textareas, где я использовал это в прошлом.
 Michael26 мар. 2015 г., 20:23
это работает в textareas, потому что редактирование элемента меняет DOM. это не относится к другим элементам.
 Mild Fuzz12 февр. 2013 г., 17:33
этот код выбирает разрывы, вызванные обычным переносом текста в DOM?

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