Javascript 根据内容长度设置显式模式宽度

我正在使用一个框架，该框架需要一个模式窗口的显式像素，该窗口将用于在系统中的各个点向最终用户显示消息。消息总是纯文本的，所以我想根据消息中字符的数量来确定宽度。一条消息可以是两个单词或两个段落

起初，我尝试了直接乘法，它对150-300的

内容、长度非常有效，但任何300都会变得太大

我需要一个算法的帮助，这个算法将影响一个较小的数字，而不是一个较大的数字。我希望它具有以下大致效果：

getWidthForContent("small message") = 120; //13 chars
getWidthForContent("another reasonable length for a modal message") = 300; //45 chars
getWidthForContent("lorem ipsum...") = 900; //600+ chars

另一种方法是尝试从曲线中找到乘数值。下面是一个非常草率的方法：

determineBestWidth: function (contentLength) {
    var width = 900; //max
    if (contentLength < 200) {
        width = contentLength * 2;
        if (contentLength < 125) {
            width = contentLength * 3;
            if (contentLength < 50) {
                width = contentLength * 5;
                if (contentLength < 20) {
                    width = contentLength * 10;
                    if (contentLength < 10) {
                        width = contentLength * 20;
                    }
                }
            }
        }
    }
    return width;
},

determineBestWidth:函数（contentLength）{
变量宽度=900；//最大值
如果（内容长度<200）{
宽度=内容长度*2；
如果（内容长度<125）{
宽度=内容长度*3；
如果（内容长度<50）{
宽度=内容长度*5；
如果（内容长度<20）{
宽度=内容长度*10；
if（contentLength<10）{
宽度=内容长度*20；
}
}
}
}
}
返回宽度；
},

请原谅我缺乏数学技能
您需要创建一个具有相同模态内容的隐藏div。

然后，通过一些CSS技巧，您将能够做您想要做的事情（如果我理解您想要什么）：


var modal=document.getElementById（“modal”）；
var modalHidden=document.getElementById（“modalHidden”）；
modalHidden.innerHTML=modal.innerHTML；
变量高度=（modalHidden.clientHeight+1）+“px”；
变量宽度=（modalHidden.clientWidth+1）+“px”；
var result=document.getElementById（“结果”）；
result.innerHTML=“高度：“+Height+”
宽度：“+Width；
if（parseInt（width.substring（0，width.length-2））<500）
{
modal.style.width=宽度；
}
#模态{
边框：1px实心深蓝色；
边界半径：4px；
文本对齐：对齐；
背景色：#a4b8ff；
填充：10px；
宽度：500px；
单词包装：打断单词；
边缘底部：40px；
}
#modalHidden
{
可见性：隐藏；
空白：nowrap；
宽度：自动；
高度：自动；
位置：绝对位置；
}
#信息{
颜色：灰色；
边缘底部：40px；
}
添加一些文本并查看宽度的变化。只要使用JS中的变量，就可以了。
一些短文
那么，您想计算px中的消息宽度，对吗？关闭，我想根据消息中的字符数计算px中适当的模式长度您是否在此模式中使用
换行符
？例如，最大值为500px，然后它会跳转到另一行并写入其余的内容。难道你不能将宽度剪裁为最小值150，最大值300吗？除非如果消息是一个完整的段落，那么它应该接近800px，并尝试使用“较小的内容”运行看起来模态宽度仍然是500+@godmode是的，我的错，忘了这部分。我更新了和代码片段。现在应该可以了。我很感谢你的意见，但是这不是我想要的。您基本上引入了最大宽度的概念。我想要一个算法的原因是像
这样的句子，这是一个非常简洁的句子。希望下一条消息会在下面出现。
这不是一条很长的消息，所以当它以300px的速度运行时，一路上升到500px是没有意义的，因为它会中断一次，看起来更好。这有意义吗？我仍然会支持你的答案，很抱歉我的回答太难了。@godmode那么你想在句子的每一个结尾（“
”字符）后换行吗？或者您想在
300px
处换行，而不是
500px
？我没有得到你真正想要的：x，但无论如何，谢谢你的投票@我这里的Excel给了我一些糟糕的函数。。我会尽快回来找你，我需要我的电脑