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

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

一旦文本超过文本区域中的线宽，它将移到另一行。用户将看到文本通过一个完整的字符串分散在多行上。我计划在这些点上插入新的换行符，这样文本可以跨多行进行换行，这样我就可以将相同格式的文本推送到服务器上，但这给我带来了困难

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

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

例1： 内部文本区域：

脾气暴躁的巫师为
邪恶的女王和杰克

行在“brew for”之后结束。当对该文本区域内容进行字符限制为34的处理时，我得到的输出为：

脾气暴躁的巫师为
邪恶的女王和杰克

完美的副本，因为它在文本框中看起来，这是所需要的。让我们看下一个实例：

例2： 内部文本区域：

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

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

脾气暴躁的巫师为
邪恶的女王和杰克

如我们所见，尽管文本框中的换行符出现在“有毒BREW”之后，但由于硬编码字符限制，我可以实现的是“有毒BREW FOR”之后的换行符。和我想要的不一样

因此，依赖于预先确定的长度，然后通过javascript将“\n”添加到相应的中断点，对我没有帮助。有没有一种方法可以准确地检测文本被包装的位置，以便我可以准确地在这些点添加新的换行符？不确定，是否有更好的方法实现同样的目标

如有任何帮助/建议，将不胜感激

---

编辑：

CSS:

JS：（参考）

---

添加一个fiddle（）来演示该场景。字体大小可以增加或减少，文本框中的外观会改变，但由于字符限制，输出将保持不变。StringDivider函数是另一个post on stack overflow的示例引用。

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

哇…问题太大了…你介意也显示css/html吗？你能显示你的

javascript

？添加了css/js摘录。

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

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

});