如何让语音框自动调整大小

Question

我创建了一个语音框，但我遇到了问题，我无法使语音框根据需要自动更改其大小（高度和宽度）。它应该根据其内容获取空间。如果其中的内容较大，框大小应固定在其中 如果内容较小，框应自动缩小大小

.hide {

  display: none;

}

.speech {

  position: absolute;

  left: 0;

  top: -22rem;

  width: 400px;

  height: 300px;

  text-align: center;

  line-height: 100px;

  background-color: #fff;

  border: 8px solid #ff5733;

  -webkit-border-radius: 30px;

  -moz-border-radius: 30px;

  border-radius: 30px;

  -webkit-box-shadow: 2px 2px 4px #888;

  -moz-box-shadow: 2px 2px 4px #888;

  box-shadow: 2px 2px 4px #888;

  display: none;

}

.speech:after {

  content: ' ';

  position: absolute;

  width: 0;

  height: 0;

  left: 38px;

  top: 300px;

  border: 15px solid;

  border-color: #fff transparent transparent #fff;

}

.speech:before {

  content: ' ';

  position: absolute;

  width: 0;

  height: 0;

  left: 30px;

  top: 300px;

  border: 25px solid;

  border-color: #ff5733 transparent transparent #ff5733;

}

.myDIV {

  position: relative;

}

.myDIV:hover .speech {

  display: block;

  color: green;

}

Answer 1

下面是更新后的代码。查看评论：.hide {&nbsp; display: none;}.speech {&nbsp; position: absolute;&nbsp; left: 0;&nbsp; /*top: -22rem; removed*/&nbsp; bottom:calc(100% + 33px); /* added */&nbsp; width: 400px;&nbsp; /* height: 300px; removed */&nbsp; text-align: center;&nbsp; line-height: 100px;&nbsp; background-color: #fff;&nbsp; border: 8px solid #ff5733;&nbsp; border-radius: 30px;&nbsp; box-shadow: 2px 2px 4px #888;&nbsp; display: none;}.speech:after {&nbsp; content: ' ';&nbsp; position: absolute;&nbsp; width: 0;&nbsp; height: 0;&nbsp; left: 38px;&nbsp; /*top: 300px; removed*/&nbsp; top:100%; /* added */&nbsp; border: 15px solid;&nbsp; border-color: #fff transparent transparent #fff;}.speech:before {&nbsp; content: ' ';&nbsp; position: absolute;&nbsp; width: 0;&nbsp; height: 0;&nbsp; left: 30px;&nbsp; /*top: 300px; removed*/&nbsp; top:100%; /* added */&nbsp; border: 25px solid;&nbsp; border-color: #ff5733 transparent transparent #ff5733;}.myDIV {&nbsp; position: relative;}.myDIV:hover .speech {&nbsp; display: block;&nbsp; color: green;}<h2>Display an Element on Hover</h2><p>Other content</p><p>Other content</p><p>Other content</p><p>Other content</p><span><span>hello buddy how do you do <span class="myDIV"> Hover over me.<span class="speech">I am shown when someone hovers over the div above.<p>Other content</p><p>Other content</p><p>Other content</p></span></span></span> well I am moe optional<p>Other content</p><p>Other content</p><p>Other content</p><p>Other content</p><p>Other content</p><p>Other content</p><p>Other content</p><p>Other content</p><span><span>hello buddy how do you do <span class="myDIV"> Hover over me.<span class="speech">I am shown when someone hovers over the div above.</span></span></span> well I am moe optional