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

Question

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

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

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

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

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

---

Редактировать

Мне удалось написать что-то, что вроде работает с использованием jQuery, хотя это очень небрежно, и что более важно, иногда кажется, что слова пропускаются, и я не могу понять, почему. #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

Лучший способ (IMO) - добавить слово целиком, но невидимые буквы невидимы. Например:

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.

Answer 2

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

Which displays pre-formatted text,

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

Answer 3

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

код

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 4

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

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