如果高度大于 X，jQuery While 循环会增加 Div 宽度

Question

我正在尝试动态增加 div 的宽度以完美适应文本，以便文本始终是 div 的 100% 高度。我正在尝试像这样进行while循环：

HTML

 <div class="container">
    <div class="overlay">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor lacus ac ligula porta, eu venenatis neque iaculis. Ut maximus arcu justo, sed rutrum sapien mattis vel. Nunc vitae lacus pellentesque, hendrerit diam non, vestibulum libero. Praesent imperdiet odio ac lorem laoreet, ut lobortis ex finibus. Aenean sed turpis libero. Fusce consectetur arcu erat, non mattis dolor ullamcorper nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus dignissim sapien hendrerit iaculis. Pellentesque dignissim.
    </p>
    </div>
    </div>

CSS

.container {
  width: 100%;
  height: 200px;
  position: relative;
  background: #fff;
  overflow: hidden;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: #f7f7f7;
  color: #000;
}

jQuery

  jQuery(document).ready(function($) {
    var width = $('overlay').width();
    while($('.overlay p').height() > 200) {
      $('.overlay').width(width);
      width++;
    }
  });

这是一个永不停止的连续循环。思路是检查宽度，继续增加，直到文字高度小于200px。

Answer 1

您的初始宽度没有很好地初始化（您忘记了点）：

jQuery(document).ready(function($) {
  var width = $('.overlay').width();

  while ($('.overlay p').height() > 200) {
    $('.overlay').width(width);
    width++;
  }
  console.log($('.overlay').width(),$('.overlay p').height())
});

.container {
  width: 100%;
  height: 200px;
  position: relative;
  background: #fff;
  overflow: hidden;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: #f7f7f7;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="overlay">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor lacus ac ligula porta, eu venenatis neque iaculis. Ut maximus arcu justo, sed rutrum sapien mattis vel. Nunc vitae lacus pellentesque, hendrerit diam non, vestibulum libero. Praesent
      imperdiet odio ac lorem laoreet, ut lobortis ex finibus. Aenean sed turpis libero. Fusce consectetur arcu erat, non mattis dolor ullamcorper nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus dignissim sapien hendrerit
      iaculis. Pellentesque dignissim.
    </p>
  </div>
</div>