预格式化文本以防止回流

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

在使用了我编辑到问题中的代码后，我设法让它正常工作。

代码：

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>");
}

不完美，但可以了。感谢大家。