Question

Ich versuche, einen Div-Container in einem Dropdown-Menü zu skalieren, damit er besser in den Text passt.

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

See: http://codepen.io/anon/pen/BLvxwY

ich natürlich nur eine min-Breite einstellen könnte, aber der Inhalt wird dynamisch generiert. So kann ein Text kürzer als die minimale Breite auftreten.

Wie kann ich das div entsprechend skalieren?

Dank

Answer 1

können Sie Js verwenden und Ihre Textlänge zählen.

Danach ändern Sie die Containerbreite mit If, Else if and Else Anweisung.

Sein aussehen:

$(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') 

    } 

    }) 

}) 

Und wenn Sie mehr Situationen haben:

$(document).ready(function(){ 

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

    var textLength = $(this).html().length; 

    if (textLength < 100) { 

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

    } else if (textLength > 100 && textLength < 200) { 

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

    } else { 

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

    } 

    }) 

}) 

Arbeiten CodePen