如何根据页面上输入的文字让对话气泡变大变小

Question

我正在我的网站上创建一个评论框，我想用像气泡一样的背景显示每条评论，我不知道用户每次输入的文字大小，互联网上的所有方法都仅限于指定的语音音量。

我使用 Firestore 和 JavaScript 来保存和显示评论，这里是页面上显示的部分，我想在 select 显示 class 语音与气泡。

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

Answer 1

我的第一个想法是利用 CSS border-image属性，因为它能够根据它所应用的元素的大小无缝地调整自身大小。

 #container { width: 400px; overflow-y: auto; overflow-x: hidden; }.comment { border-image: url(https://www.zupimages.net/up/21/18/m734.png) 54 142 144 114 / 20px / 0px stretch; width: 100%; min-height: 40px; padding: 0px 10px 10px; overflow: hidden; box-sizing: border-box; margin-bottom: 20px; border-style: solid; border-width: 20px; }

 <div id="container"> <div class="comment">I'm a small comment.</div> <div class="comment"> I'm a big comment.<br /> I will be displayed on multiple lines.<br /> And my container should resize itself accordingly.<br /> With no limit of size.<br /> Thanks to the border-image property.<br /> </div> <div class="comment">I'm another small comment.</div> </div>