Question

我正在尝试在下拉菜单中缩放div容器，以便更好地适应内部文本。

<div class='dropdown'>
    <button class ="dropbtn"><b>Hover!</b></button>
    <div class='dropdown-content'>
        <div class='dropdown-level2'>
            <button class ="dropbtn-level2"><b>"..."</b></button>
            <div class='dropdown-content-level2'>
                <a>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</a>
            </div>
        </div>
    </div>
</div>

请参阅：http://codepen.io/anon/pen/BLvxwY

当然我可以设置最小宽度，但内容是动态生成的。因此，可以出现短于最小宽度的文本。

我如何相应地缩放div？

由于

Answer 1

您可以使用Js并计算文本长度。

之后用int fibo1(int i, std::map<int,int>& m) { int &value = m[i]; if( value == 0) { value = fibo1(i-1,m)+fibo1(i-2,m); } return value; }语句更改容器宽度。

看起来像这样：

If, Else if and Else

如果你有更多情况：

$(document).ready(function(){

  $('.dropdown-content-level2 > a').each(function(){

    //count your text length
    var textLength = $(this).html().length;

    //if it less from 100 characters
    if (textLength < 100) {

      $(this).css('width', '100px')

    } else {

      $(this).css('width', '200px')

    }

  })

})

工作CodePen

多级下拉中的Div Scaling

1 个答案: