Предварительно отформатированный текст для предотвращения переполнения

Question

Я написал довольно простой скрипт, который будет принимать элементы (в этом случае основные элементы составляют <p>) и введите их содержимое как пишущую машинку один за другим.

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

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

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

Я рисую что-то, что связано с скрытым элементом <span>, добавляя к нему текст постепенно, и проверка его ширины на ширину контейнера может быть на правильном пути, но я не совсем уверен, как на самом деле собрать это вместе. Любая помощь или предложения по лучшим методам будут оценены.

---

Edit:

мне удалось написать что-то, что рода работ с использованием JQuery, хотя это очень неаккуратно, и что еще более важно, иногда кажется, чтобы пропустить слова, и я могу» t выяснить почему. #content - это имя контейнера, а #ruler - это имя скрытого <span>. Я уверен, что есть намного лучший способ сделать это.

function formatText(html) { 
    var textArray = html.split(" "); 
    var assembledLine = ""; 
    var finalArray = new Array(); 
    var lastI = 0; 
    var firstLine = true; 
    for(i = 0; i <= textArray.length; i++) { 
     assembledLine = assembledLine + " " + textArray[i]; 
     $('#ruler').html(assembledLine); 
     var lineWidth = $('#ruler').width(); 
     if ((lineWidth >= $('#content').width()) || (i == textArray.length)) {     
      if (firstLine) { var tempArray = textArray.slice(lastI, i); } 
      else { var tempArray = textArray.slice(lastI+1, i); } 
      var finalLine = tempArray.join(" "); 
      finalArray.push(finalLine); 
      assembledLine = ""; 
      if (lineWidth > $('#content').width()) { i = i-1; } 
      lastI = i; 
      firstLine = false; 
     } 
    } 
    return finalArray.join("<br>"); 
} 

Answer 1

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

Код:

function formatText(html) { 
    var textArray = html.split(" "); 
    var assembledLine = ""; 
    var finalArray = new Array(); 
    var lastI = 0; 
    var firstLine = true; 
    for(i = 0; i <= textArray.length; i++) { 
     assembledLine = assembledLine + " " + textArray[i]; 
     $('#ruler').html(assembledLine); 
     var lineWidth = $('#ruler').width(); 
     if ((lineWidth >= $('#content').width()) || (i == textArray.length)) {     
      if (firstLine) { var tempArray = textArray.slice(lastI, i); } 
      else { var tempArray = textArray.slice(lastI+1, i); } 
      var finalLine = tempArray.join(" "); 
      finalArray.push(finalLine); 
      assembledLine = ""; 
      if (lineWidth >= $('#content').width()) { i = i-1; } 
      lastI = i; 
      firstLine = false; 
     } 
    } 
    return finalArray.join("<br>"); 
} 

Не совершенным, но он будет делать. Всем спасибо.

Answer 2

Вы можете использовать предварительно тег:

Which displays pre-formatted text,

или вы можете поместить содержимое в сНу тег, установить фиксированную ширину, и сценарий, основанный на том, что.

Answer 3

Возможный подход заключается в установке дисплея p inline (поскольку блок отображения по умолчанию сделает p, чтобы потреблять всю ширину, даже если он имеет только 1 символ), а затем, когда вы «набираете», проверяйте ширину элемента.
Установите допуск в рх (25px, например) и один раз ширина p «s достигает полного допуска доступна ширина ширина минус вставки <br />

Я думаю, что это должно работать ...

Answer 4

Лучший способ (ИМО) состоит в том, чтобы добавить все слово, но невидимые буквы «невидимы». E.г:

H<span style="visibility: hidden;">ello</span> 

He<span style="visibility: hidden;">llo</span> 

Hel<span style="visibility: hidden;">lo</span> 

Hell<span style="visibility: hidden;">o</span> 

Hello 

Чтобы сделать его проще, дать пролете имя, и удалите его из DOM каждый раз.