Question

如果div增长超过div height的{{1}}，我需要动态更改宽度max-height }}。它需要动态增长的原因是我120px文本内容append，有时候文本太多了。

现在，div显示如下：的 HTML

div

CSS

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

JS

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

我看到了几个相关的帖子A B，但在经过多次尝试调整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>');

之后无法从中获得答案

Answer 1

请仔细阅读以下代码。它的工作原理基于scrollHeight。

纯JavaScript解决方案

示例<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>

方法1 - 如果scrollHeight大于maxHeight，请<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>

方法2 - 在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
  // ...

方法1 - 如果scrollHeight大于maxHeight，请<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

方法2 - 在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

希望它有所帮助！

当div高度达到最大高度时，将div的宽度动态扩展为内容

1 个答案: