Javascript 预格式化文本以防止回流

我已经编写了一个相当简单的脚本，它将获取元素（在本例中，主要关注的是

元素），然后像打字机一样逐个地键入它们的内容

问题是，当它键入时，当它到达容器mid word的边缘时，它会使文本回流并跳到下一行（就像任何文本编辑器中的word wrap一样）

当然，这是预期的行为；但是，我想预先格式化文本，这样就不会发生这种情况

我认为在将要换行的单词之前插入

是最好的解决方案，但我不太确定这样做的最佳方式是支持所有字体大小和容器宽度，同时保持所有HTML标记完好无损

我认为涉及一个隐藏的

元素、逐渐向其中添加文本并根据容器宽度检查其宽度可能是正确的，但我不太确定如何实际将其组合在一起。如有任何关于更好方法的帮助或建议，将不胜感激

---

编辑：

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

我已经设法用jQuery写了一些有用的东西，尽管它非常草率，更重要的是，有时它似乎会跳过单词，我不知道为什么#content是容器的名称，#ruler是隐藏的

的名称。我相信有一个更好的方法

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

函数格式文本（html）{
var textary=html.split（“”）；
var assembledLine=“”；
var finalArray=新数组（）；
var-lastI=0；
var firstLine=true；
对于（i=0；i=$（'#content'）.width（））| |（i==textary.length））{
if（firstLine）{var tempArray=textArray.slice（lastI，i）；}
else{var tempArray=textArray.slice（lastI+1，i）；}
var finalLine=tempArray.join（“”）；
芬拉雷推（芬拉宁）；
assembledLine=“”；
如果（线宽>$（“#内容”）.width（）{i=i-1；}
lastI=i；
firstLine=false；
}
}
返回finalArray.join（“
”）；
}

您可以使用pre标记：它显示预先格式化的文本，或者您可以将内容放入div标记中，设置一个固定的宽度，并在此基础上编写脚本。

一种可能的方法是设置

p

显示内联（因为默认显示块将使

p

消耗所有宽度，即使它只有一个字符）然后在“键入”时检查元素宽度。
Which displays pre-formatted text, 以px为单位设置公差（例如25px），一旦

p

的宽度达到总可用宽度减去插入的宽度公差

---

我认为这应该行得通…

在玩了我在问题中编辑的代码之后，我设法让它正常工作

代码：

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

函数格式文本（html）{
var textary=html.split（“”）；
var assembledLine=“”；
var finalArray=新数组（）；
var-lastI=0；
var firstLine=true；
对于（i=0；i=$（'#content'）.width（））| |（i==textary.length））{
if（firstLine）{var tempArray=textArray.slice（lastI，i）；}
else{var tempArray=textArray.slice（lastI+1，i）；}
var finalLine=tempArray.join（“”）；
芬拉雷推（芬拉宁）；
assembledLine=“”；
如果（线宽>=$（“#内容”）.width（）{i=i-1；}
lastI=i；
firstLine=false；
}
}
返回finalArray.join（“
”）；
}

不完美，但也可以。谢谢大家。

最好的方法（IMO）是添加整个单词，但不显示未键入的字母。例如：

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

---

为了简化操作，请为跨度指定一个名称，并每次将其从DOM中删除。

没有完整的解决方案，但如果您在跨度中每次添加一个单词，您可以检查高度以确定何时添加换行符，然后添加一个

，或者添加硬换行符。只需确保将

添加为一个字符，而不是

在
中以
#content
元素中的所有文本开头，并将其一次移动一个字符到
？如果这会导致太多的跳跃，请将每个字符以跨距进行换行，然后更改类。我尝试过这样做，但据我所知，只有当行只需要换行一次时，它才有效。插入一个

且位于第二行后，宽度为最长行的宽度。因此，如果文本太长，需要多次换行，则它不起作用。至少，我认为是这样。。。我可能是误解了。这是一个相当聪明的解决方案，但它需要我完全重写我所做的一切。也许有一天我会这么做。谢谢你的建议。：）
Hel<span style="visibility: hidden;">lo</span>
Hell<span style="visibility: hidden;">o</span>
Hello