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

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 {

  display: none;

}

.speech {

  position: absolute;

  left: 0;

  /*top: -22rem; removed*/

  bottom:calc(100% + 33px); /* added */

  width: 400px;

  /* height: 300px; removed */

  text-align: center;

  line-height: 100px;

  background-color: #fff;

  border: 8px solid #ff5733;

  border-radius: 30px;

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

  display: none;

}

.speech:after {

  content: ' ';

  position: absolute;

  width: 0;

  height: 0;

  left: 38px;

  /*top: 300px; removed*/

  top:100%; /* added */

  border: 15px solid;

  border-color: #fff transparent transparent #fff;

}

.speech:before {

  content: ' ';

  position: absolute;

  width: 0;

  height: 0;

  left: 30px;

  /*top: 300px; removed*/

  top:100%; /* added */

  border: 25px solid;

  border-color: #ff5733 transparent transparent #ff5733;

}

.myDIV {

  position: relative;

}

.myDIV:hover .speech {

  display: block;

  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