在无序列表上调整聊天气泡大小

Resizing Chat Bubble on Unordered List

本文关键字：气泡 聊天 调整 无序 列表      更新时间：2023-09-26

我有一个作为聊天平台的无序列表。对于用户向列表中添加的每条"消息"，我让它在后面显示一个聊天气泡，但是，随着添加的每条消息，聊天气泡的大小保持不变，这意味着如果消息包含一定数量的字符，它将显示在气泡之外。是否有一种方法，聊天气泡调整自己的大小，由于消息的大小?最好在大约25个字符之后，我希望消息开始一个新的行，气泡的高度扩大。另一方面，如果一条消息只有5个字符长，聊天框会调整大小以适应这个长度。

这里有一张图来说明这个问题:https://i.stack.imgur.com/6YG7P.jpg

这是我的Jquery/Javascript

 $('#submit').click(function(){
  var message = $('#typetextbox').val();
  if (message.replace(/ /g, '')){
      var positions = makeNewPosition();
      var el = $('<li>'+message+'</li>');
      el.attr('gridpos', positions[0].toString()+"x"+positions[1].toString())
      el.css('left', positions[1] * window.li_width);
      el.css('top', positions[0] * window.li_height);
      $('#messagebox').append(el);

      setTimeout(function() {
          el.fadeOut();
          var gridpos = el.attr('gridpos');
          delete window.grid[gridpos];
      }, 4000 );

  }
  $("#typetextbox").val("");
});
});
 window.grid = {};
window.li_height = 20;
window.li_width = 200;
function makeNewPosition(){

var h = Math.floor($(window).height()/window.li_height);
var w = Math.floor($(window).width()/window.li_width);
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
var gridpos = nh.toString() + "x" + nw.toString();
if(typeof window.grid[gridpos] == 'undefined'){
    return [nh,nw];
}else{
    return makeNewPosition();
}
这是我的CSS: 
li{
height: 24px;
width: 220px;
margin: 2px;
padding: 5px;
position: absolute;
z-index: -2;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
background-image: url(Images/chat-bubble-left-flick.png);
background-repeat: no-repeat;
background-position: -25px center;
}
ul{
list-style:none;
}

很抱歉提供了很多代码，但我不确定我的问题在哪里/适合。我假设这是Javascript中要纠正的东西，而不是使用背景图像?

height: 24px;是原因，用min-height: 24px;代替。

是否需要position: absolute; ?

相关文章：