Question

我正在为个性化商品构建一个网络应用程序。要求是向用户提供一些文本框以获取输入，将完全相同的格式推送到服务器并进行处理。我有textareas来接受输入，但一直在努力推动我们在浏览器。

一旦文本超出textarea中的行宽，它就会移动到另一行。用户可以通过一个完整的字符串看到文本分布在多行中。我计划在这些点插入新的换行符，以便文本可以跨多行分解，这样我就可以将相同格式的文本推送到服务器，但它给了我一个艰难的时间。

提供给用户的选项是字体及其不同的大小。即使对于相同的字体，文本区域中的一行也可以根据键入的字符的宽度容纳不同数量的字符。这使得内容无法预测，无法根据任何预定的最大字符长度打破该行。

如果我硬编码一行中的字符数并通过javascript添加'\ n'，我有点能够实现它，但正如我上面提到的，这会破坏输出。我能够添加新的换行符，但仅限于硬编码限制。由于字符具有不同的宽度，因此相同的约束无法正常工作。

示例1：在textarea里面：

脾气暴躁的巫师为有毒酿造邪恶的女王和杰克。

在“brew for”之后换行。当此文本区域内容根据char限制为34处理时，我得到的输出是：

脾气暴躁的巫师为有毒酿造邪恶的女王和杰克。

在文本框中查看完美复制品，这就是所需要的。让我们看看下一个例子：

示例2：内部文字区域：

GRUMPY WIZARDS制造有毒的BREW 对于邪恶的女王和杰克。

在“BREW”之后立即换行。处理此文本区域内容时，输出为：

GRUMPY WIZARDS为有毒的BREW做准备邪恶的女王和杰克。

正如我们所看到的，尽管在“TOXIC BREW”之后的文本框内发生了换行，但由于硬编码的限制，我可以实现“TOXIC BREW FOR”之后的休息。与我想要的不一样。

所以依靠预定的长度然后通过javascript将'\ n'添加到相应的中断点并没有帮助我。有没有办法检测文本的确切位置，以便我可以在这些点上精确添加新的换行符？不确定，如果有更好的方法来实现同样的目标吗？

任何帮助/指示都将受到高度赞赏。

编辑：

CSS：

textarea#lpt {
height: 150px;
width: 50%;
border: 1px solid rgb(204, 204, 204);
/*font-size:20px;*/
}

JS :(参考Wrap Text In JavaScript）

function stringDivider(str, width, spaceReplacer) {
    if (str.length>width) {
        var p=width
        for (;p>0 && str[p]!=' ';p--) {
        }
        if (p>0) {
            var left = str.substring(0, p);
            var right = str.substring(p+1);
            return left + spaceReplacer + stringDivider(right, width, spaceReplacer);
        }
    }
    return str;
}
$(document).ready(function(){
    $('#submit_text').click(function(){
        text = $('#lpt').val();
        alert("Original text submitted is: "+ "\n"+text);
        textWithBreaks = stringDivider(text, 34, "\n");
        alert("Processed Text is : "+"\n"+textWithBreaks);
    });

});

添加小提琴（http://jsfiddle.net/beetleport/aR2YH/2/）以演示场景。字体大小可以增加或减少，文本框中的外观会发生变化，但由于字符数限制，输出将相同。 StringDivider函数是来自堆栈溢出的另一个帖子的示例引用。

Answer 1

我使用了错误的方法。最好的方法是使用文本宽度并将其与文本区域中的左宽度进行比较。这篇文章Calculating text width帮助我定义了一个假的span元素，在运行时添加了文本，然后计算了可以容纳的实际宽度。

无法在文本换行并移动到下一行的文本区域内断行

1 个答案: