如何使HTML文本区域动态化（即宽度减小时变高）

由 det发布于 2020-05-24 03:17:13 cssjqueryhtml

我有这个文本区域和彩色框，在全屏屏幕上看起来还不错。但是，当我减小宽度时，文本会掉出底部的框。（您可以通过最小化jsfiddle屏幕来复制它）

如何使盒子的动态高度可以缩放？

所有这一切都是很新的，如果这是一个新手问题，请您道歉。

  <label for="battery-output"></label>
  <output id="battery-output" for="battery-size battery-usable" name="output">70% of ( 90% of 3.6kWh ) = 2.27kWh per day</output>
  <br>
  <output id="battery-output" for="battery-size battery-usable" name="output2">This will take 1.9 x 30 min charge slots (so we round up to 2 slots)</output>
</div>

.rcorners {
  border-radius: 5px;
  border: 1px solid #ffb347;
  background-color: #ffb347;
  padding: 5px;
  width: 100%;
  height: 60px;
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}```

老实人 2020-05-24 03:17:13 回复

尽量远离硬编码的高度。取而代之的是使用填充，让内容决定元素的高度。

.rcorners {
  border-radius: 5px;
  border: 1px solid #ffb347;
  background-color: #ffb347;

  padding: 10px 5px;
 /*        ~~~~
   Box has 10px padding top/bottom added to element's 
   natural (intrinsic) content height 
 */

  width: 100%;
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

<div class="rcorners">
  <label for="battery-output"></label>
  <output id="battery-output" for="battery-size battery-usable" name="output">70% of ( 90% of 3.6kWh ) = 2.27kWh per day</output>
  <br>
  <output id="battery-output" for="battery-size battery-usable" name="output2">This will take 1.9 x 30 min charge slots (so we round up to 2 slots)</output>
</div>

jsFiddle