jQuery While 循环以在高度大于 X 时增加 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>