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

https://jsfiddle.net/zarch/btrhuxj9/1/

我有这个文本区域和彩色框,在全屏屏幕上看起来还不错。 但是,当我减小宽度时,文本会掉出底部的框。 (您可以通过最小化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;
}```


评论
  • 老实人
    老实人 回复

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

    .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