如果高度大于X，jQuery While Loop可增加分段宽度

Question

我试图动态地增加div的宽度，以完美地适应文本，使文本始终是div的100%高度

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>