Question

我尝试制作一个演示聊天应用程序，我设计了一个聊天泡泡，但我不知道如何实现自动大小的泡泡聊天。目前，它具有固定的宽度和高度，我希望气泡的大小适合文本内容。

这是我目前所拥有的缩小版本：

function typo() {
  var currentText = document.getElementById("demo").innerHTML;
  var x = '<p class=bubble>' + document.getElementById("myText").value + '</p>';
  document.getElementById("myText").value = "";
  var y = document.getElementById("demo").innerHTML = currentText + x;
}

var input = document.getElementById("myText");

input.addEventListener("keyup", function(event) {
  event.preventDefault();
  if (event.keyCode === 13) {
    document.getElementById("btn-chat").click();
  }
});

.bubble{ 
  clear: both;
  box-sizing: border-box;
  position: relative;
  width: 200px;
  height: 75px;
  padding: 4px;
  background: #C28584;
  border-radius: 10px;
  margin : 30px;
  z-index: -1;
}

.bubble:after{ 
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 11px 30px 11px 0;
  border-color: transparent #C28584;
  display: block;
  width: 0;
  overflow: auto;
  left: -30px;
  top: 31px;
}

.bottom{ 
   position: absolute;
   bottom: 1px;
} 

.widebox{
  width: 100%;
  float: left;
  margin-left: -10px;
}

button {
 float : right;
 margin-left: 250px;
 margin-right: -50px;
 margin-top : -28px;
}

<div class="container">
  <div class="row">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <span class="glyphicon glyphicon-comment"></span> Chat
        <div class="btn-group"></div>
      </div>
    </div>
  </div>        
  <div class="bottom">
    <p id="demo"></p>
    <input class="widebox" type="text" id="myText" value="">
    <button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button>
  </div>
</div>

演示在这里，你可以看到它的实际效果：https://jsfiddle.net/mzdf0dbw/5/

Answer 1

在您的CSS中，将height: 75px;更改为height:auto;

Answer 2

我对您的代码进行了一些更改并实现了它。请参阅此Fiddle，并告诉我这是否是所需的输出。

<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<style>
  .bubble {
    clear: both;
    box-sizing: border-box;
    position: relative;
    width: auto;
    height: auto;
    padding: 4px;
    background: #C28584;
    border-radius: 10px;
    margin: 10px 30px;
    display: inline-block;
    z-index: -1;
    padding-left: 15px;
    /* min-width: 50px; */
    padding-right: 15px;
  }

  .bubble:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 11px 32px 11px 0;
    border-color: transparent #C28584;
    display: block;
    width: 0;
    overflow: auto;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
  }

  .bottom {
    position: absolute;
    bottom: 01px;
  }

  .widebox {
    width: 100%;
    float: left;
    margin-left: -10px;
  }

  button {
    float: right;
    margin-left: 250px;
    margin-right: -50px;
    margin-top: -28px;
  }

</style>

<body>
  <div class="container">

    <div class="row">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <span class="glyphicon glyphicon-comment"></span> Chat
          <div class="btn-group">
          </div>
        </div>
      </div>
    </div>


    <div class="bottom">
      <div id="demo"></div>
      <input class="widebox" type="text" id="myText" value="">
      <button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button>
    </div>
  </div>
  <script>
    function typo() {
      var currentText = document.getElementById("demo").innerHTML;
      var x = '<div><p class=bubble>' + document.getElementById("myText").value + '</div></p>';
      document.getElementById("myText").value = "";
      var y = document.getElementById("demo").innerHTML = currentText + x;
    }

    var input = document.getElementById("myText");
    input.addEventListener("keyup", function(event) {
      event.preventDefault();
      if (event.keyCode === 13) {
        document.getElementById("btn-chat").click();
      }
    });

  </script>

</body>

Answer 3

This site（bubbly）显示了如何使用CSS实现聊天气泡的示例。如果您想尝试使用CSS边框半径值来获得正确的气泡“外观”，请尝试CSS Borders website。

如何基于文本内容自动调整聊天气泡元素的大小？

3 个答案: