Question

我编写了一个相当简单的脚本，它将采用元素（在这种情况下，元素是主要关注点）并像打字机一样逐个输入内容。

问题在于，当它键入时，当它到达容器中间词的边缘时，它会回流文本并跳转到下一行（就像任何文本编辑器中的自动换行一样）。

这当然是预期的行为;但是，我想预先格式化文本，以便不会发生这种情况。

我认为在将要包装的单词之前插入 将是最佳解决方案，但我不太确定这样做的最佳方法是支持所有字体大小和容器宽度，同时保持任何HTML标签不变。

我想要一个涉及隐藏元素的东西，逐渐向它添加文本并检查其宽度与容器宽度可能在正确的轨道上，但我不太确定如何将它们放在一起。任何有关更好方法的帮助或建议都将受到赞赏。

<小时/> 的修改：

我已经设法使用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>");
}

Answer 1

您可以使用预标签：

Which displays pre-formatted text,

或者您可以将内容放入div标签，设置固定宽度和基于此的脚本。

Answer 2

最好的方式（IMO）是添加整个单词，但是“un-typed”字母是不可见的。 E.g：

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

为了简化操作，请为span指定名称，并每次从DOM中删除它。

Answer 3

一种可能的方法是将p显示内联设置（因为默认的显示块会使p消耗所有宽度，即使它只有1个字符）然后当你'键入'时检查元素宽度以px（例如25px）设置公差，并且p的宽度达到总可用宽度减去宽度公差后插入 

我认为这应该有用......

Answer 4

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

<强>代码：

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

不完美，但它会。谢谢，大家。

预格式化文本以防止回流

4 个答案: