Могу ли я обернуть каждую строку многострочного текста в промежутке?

Я пытался выяснить, как это сделать (если это возможно) и нарисовал пробел …

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

Например…!

I have some text that wraps onto three lines in this container

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

 
I have some text that wraps onto three lines in this container

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

Это выполнимо? Я нашел это -> http://vidasp.net/tinydemos/numberOfLines.html, который вычисляет количество строк, используемых в блоке текста, но на самом деле это не распространяется на то, что мне нужно.

Если какой-либо jQuery ниндзя может помочь, я буду очень благодарен!

Похоже, вы спрашиваете, как разделить текст, где он, естественно, обернут браузером. К сожалению, это совсем не просто. Также он не является надежным – рассмотрим следующий сценарий:

  • Пользователь просматривает вашу страницу, отображает div и запускается событие onload,
  • 3 элемента span создаются из текстового узла, 1 для каждой завернутой строки текста,
  • Пользователь изменяет размер браузера и размер изменений div.

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

Тем не менее, это непросто. Аналогичный вопрос возник до (хотя и с другой целью), и появились два решения, которые могли бы помочь:

Решение 1: getClientRects ()

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

Pros

  • Быстро; getClientRects возвращает позицию каждой строки
  • Просто; код более элегантный, чем решение 2

Cons

  • Обернутый текст должен содержаться встроенным элементом.
  • Никакой стиль не будет применяться к тексту (например, font-weight или font-color). Только полезно для таких вещей, как background-color или border.

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

Решение 2. Сплит, объединение, цикл, слияние

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

Pros

  • Каждая строка может быть написана с использованием любого свойства CSS, такого как font-weight или text-decoration.
  • Каждая строка может иметь свои собственные обработчики событий.

Cons

  • Медленный и громоздкий из-за многочисленных операций DOM и строк

Вывод

Могут быть другие способы достижения вашей цели, но я не уверен в себе. TextNode.splitText(n) может разделить TextNode в twain (!) При передаче числового индекса символа, который вы хотите разбить. Ни один из вышеперечисленных решений не идеален, и оба ломаются, как только размер элемента изменяется.

Я собрал скрипку, реализующую решение №2 от Andy E (см. Выше). Т.е. Split, join, loop, merge

Вот алгоритм:

 var spanInserted = $('#someText').html().split(" ").join(" "); var wrapped = ("").concat(spanInserted, ""); $('#someText').html(wrapped); var refPos = $('#someText span:first-child').position().top; var newPos; $('#someText span').each(function(index) { newPos = $(this).position().top if (index == 0){ return; } if (newPos == refPos){ $(this).prepend($(this).prev().text() + " "); $(this).prev().remove(); } refPos = newPos; }); 

Наслаждаться…

 var classes = ",red-bg,orange-bg,yellow-bg".split(",") var txt = $('#quote').html().split("\n") //this gives you FIVE items because of the leading and trailing CRs //so we skip the first and last item in the loop var output = "" for(var x=1;x"+txt[x]+"" } $('#quote').html(output) 

Это даст вам текстовый узел, но я не уверен, что он помогает

 $("#quote") .contents() .filter(function() { return this.nodeType == 3; }) 
  • Извлечение текста OpenCV
  • Масштабировать текст в режиме просмотра?
  • Java отрицательный int для шестнадцатеричного и обратного сбоев
  • Обосновать последнюю строку div?
  • Как добавить разрыв строки в Android TextView?
  • андроидный эллипсовый многострочный текст
  • Как печатать цвет в консоли с помощью System.out.println?
  • Сортировка текстового файла по длине строки, включая пробелы
  • Как эффективно анализировать CSV-файл в Perl?
  • Ограниченный выбор в JTextField / JTextComponent?
  • Тайм-аут в async / wait
  • Давайте будем гением компьютера.