Javascript 如何根据页面上输入的文本使语音气泡变得越来越大和越来越小

我在我的网站上创建了一个评论框，我想显示每个评论，背景像语音泡泡，我不知道用户每次输入的文本大小，互联网上的所有方法都限制在指定的语音音量内

我使用Firestore和JavaScript来保存和显示评论，这里有一部分显示在页面上，我想选择ShowClass speech with speech Bubble

querysnapshot.forEach(function (doc){
    listDIv.innerHTML +=  " <div class ='user'> <h3>" +"<i class='fas fa-user'></i> "+ 
    doc.data().name +" : " +"</h3>  <p class='speech'>" + doc.data().message + " </p></div>";
  });

querysnapshot.forEach（函数（doc））{
listDIv.innerHTML++=“”++
doc.data（）.name+“：“+”
“+doc.data（）.message+”
”；
});

我的第一个想法是利用CSS

边框图像

属性，因为它能够根据应用到的元素的大小无缝地调整自身大小

#容器{
宽度：400px；
溢出y：自动；
溢出x：隐藏；
}
.评论{
边框图像：url(https://www.zupimages.net/up/21/18/m734.png)54142144114/20px/0px拉伸；
宽度：100%；
最小高度：40px；
填充：0px 10px 10px；
溢出：隐藏；
框大小：边框框；
边缘底部：20px；
边框样式：实心；
边框宽度：20px；
}

我是一个小评论。
我是一个大评论。

我将显示在多行上。

我的容器也应该相应地调整大小。

没有大小限制。

感谢border image属性。

我是另一个小评论。

我在WIndows 10 Edge上尝试了这个功能，但没有效果（没有语音气泡），而是设置了边框样式：solid；和边框宽度（我任意将其设置为1px，我不知道在这种内联图像情况下，数量是否会产生差异）以及语音气泡的出现。在IOS Safari上，语音气泡出现时不需要这些设置。@Haworth Fiddle FixedTanks-似乎工作得很好。“你能把你的代码作为一个小片段放到你的实际答案中吗？这样它就可以为将来的人们提供了吗？”霍沃斯说