javascript - 一旦 div 高度达到最大高度，动态扩展 div 的宽度到内容

Question

我有一个 div 类，我需要动态更改其宽度，以防 div 超出 height max-height 为 120px。它需要动态增长的原因是我正在append将文本内容添加到div，有时文本太多无法容纳。

现在，div 显示如下:HTML

<div class="arrow_box"></div>

CSS

.arrow_box{
  width:320px;
  max-height:120px;
}

JS

var timelineSentences = ["OjVIQgtdei NFrqcgRKpy orPfulDVcs eisVloPqXC wfSFifDQqK ghPZyeNKJE wryCLNvlQp pOErunxEtg FyZlcZxkhl xfNSVRuymx HxKxiRTYza AnyUKcgKNO gsYuTscCvx VjIphTkFSc LxmDDASiuI HbWLNJpsVC tTtmBMJsHd asXCGlFqxS vBGpsVkgtN gCPTSKWzog dsAZwIwPbC pWZanKGAFZ dielrXJNMb LZqwCdRtIT viqdgYHGfp PUxhrwKfkG MaiiJUYFOo cfAXxiHTNB TxOqTtxvmg gzmKznNrJF"]

$('.arrow_box').append('<p  style="margin-bottom:0;padding:10px;">'+timelineSentences[0]+'</p>');

我看到了一些相关的帖子 A B但在多次尝试调整 scrollHeight

后无法从他们那里得到答案

Answer 1

请看下面的代码。它基于 scrollHeight 工作.

纯 JavaScript解决方案

sample <div>

<div class="arrow_box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Approach 1 - If scrollHeight is greater than maxHeight, make <div> 100%

<script>
  var
    arrowBox = document.querySelector('.arrow_box'),  // Get element
    scrollHeight = arrowBox.scrollHeight,  // Get scrollHeight
    maxHeight = 120;

  if (scrollHeight > maxHeight) {
    // Make width as 100%
    arrowBox.style.width = '100%';
  }
</script>

Approach 2 - Increase width equivalent to the exceeded height in pixels

<script>
  var
    arrowBox = document.querySelector('.arrow_box'),  // Get element
    scrollHeight = arrowBox.scrollHeight,  // Get scrollHeight
    maxHeight = 120,
    constantFactor = 3;  // To make sure after readjusting the width, content does not overflow again

  if (scrollHeight > maxHeight) {
    // Increase width equivalent to the exceeded height in pixels
    var extraPx = (scrollHeight - maxHeight) * constantFactor;
    arrowBox.style.width = (arrowBox.offsetWidth + extraPx) + 'px';
  }
</script>

jQuery两种方法的解决方案!

(document).ready(function() {
  var timelineSentences = ["OjVIQgtdei NFrqcgRKpy orPfulDVcs eisVloPqXC wfSFifDQqK ghPZyeNKJE wryCLNvlQp pOErunxEtg FyZlcZxkhl xfNSVRuymx HxKxiRTYza AnyUKcgKNO gsYuTscCvx VjIphTkFSc LxmDDASiuI HbWLNJpsVC tTtmBMJsHd asXCGlFqxS vBGpsVkgtN gCPTSKWzog dsAZwIwPbC pWZanKGAFZ dielrXJNMb LZqwCdRtIT viqdgYHGfp PUxhrwKfkG MaiiJUYFOo cfAXxiHTNB TxOqTtxvmg gzmKznNrJF"]

  $('.arrow_box').append('<p style="margin-bottom: 0; padding: 10px;">' + timelineSentences[0] + '</p>');

  // ...
  // CODE BELOW
  // ...

Approach 1 - If scrollHeight is greater than maxHeight, make <div> 100%

  var
    arrowBox = $('.arrow_box'),  // Get element
    scrollHeight = arrowBox.prop('scrollHeight'),  // Get scrollHeight
    maxHeight = 120;

  if (scrollHeight > maxHeight) {
    // Make width as 100%
    arrowBox.width('100%');
  }
});  // Close ready() function

Approach 2 - Increase width equivalent to the exceeded height in pixels

  var
    arrowBox = $('.arrow_box'),  // Get element
    scrollHeight = arrowBox.prop('scrollHeight'),  // Get scrollHeight
    maxHeight = 120,
    constantFactor = 3;  // To make sure after readjusting the width, content does not overflow again

  if (scrollHeight > maxHeight) {
    // Increase width equivalent to the exceeded height in pixels
    var extraPx = (scrollHeight - maxHeight) * constantFactor;
    arrowBox.width((arrowBox.width() + extraPx) + 'px');
  }
});  // Close ready() function

希望对您有所帮助!