Wie wird das Elternelement bei Zeilenumbrüchen verkleinert?

Question

Wie kann ich ein HTML-Elternelement seine Breite anpassen, wenn ein Kindelementtext in eine neue Zeile umgebrochen wird? Benötige ich Javascript oder kann es mit CSS gemacht werden?

Unten ist ein Beispiel.

ul { 
 
    align-items: stretch; 
 
    justify-content: center; 
 
    background: lightgrey; 
 
    display: flex; 
 
    flex-direction: row; 
 
    height: 80px; 
 
    justify-content: flex-start; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
} 
 
li { 
 
    background-color: #303E49; 
 
    display: flex; 
 
    list-style: none; 
 
    margin-right: 0.5em; 
 
} 
 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
    margin: 0.5em 0.5em 0.5em 0.5em; 
 
    border: 1px solid white; 
 
}

Resize this window horizontally to see what I am talking about. 
 

 
<ul> 
 
    <li> 
 
    <a href="#">HowCanIMakeThisBoxShrink 
 
      WhenTheTextBreaksToANewLine?</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Text</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Text</a> 
 
    </li> 
 
</ul>

Ich brauche das Containerelement <li></li> Breite <a></a> die Textbreite ihres Kindes anzupassen. In meiner aktuellen Implementierung wird die Breite <a></a> verringert, wenn der Text in eine neue Zeile bricht, aber nicht die Breite der <li></li>

Dank

Answer 1

Zur Zeit haben Sie nur den Inhalt zu zwingen, diese divs offen. Wenn Sie die Breite dieser Divs definieren, sollten Sie den gewünschten Effekt erhalten, den Sie suchen. So etwas wie dies würde ein noch dreispaltige Layout erstellen:

li{ 
    width: 33.33%; 
} 

aber es klingt wie Sie etwas dynamischer als ein statisches dreispaltige Layout wollen, aber ich bin nicht ganz sicher, was Sie suchen zum. Wenn meine obige Lösung nicht hilft, können Sie vielleicht genauer erklären, wonach Sie suchen?

Answer 2

Ich habe gerade versucht, Zeilenumbrüche durch <br> bei der Größenänderung zu ersetzen (wenn sich die Spannweite ändert). Es funktioniert bei der Größenänderung. Jetzt vielleicht die Ersetzung von <br> zu Newline bei der Größenanpassung (vielleicht erinnere mich an die Breite, bei der der Ersatz getan wurde).

var before=$("#shrink a span").height(); 
 

 
$(window).resize(function() { 
 
    //alert(replaced); 
 
    var elem = $("#shrink a span"); 
 
    var now = elem.height(); 
 
    var str=elem.html(); 
 
    if (now > before) { 
 
    elem.html(str.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br>$2')); 
 
    } 
 
    //$("body").prepend("<div>"+before+' '+now+"/div>"); 
 
    before = elem.height(); 
 
});

ul { 
 
    align-items: stretch; 
 
    justify-content: center; 
 
    background: lightgrey; 
 
    display: flex; 
 
    flex-direction: row; 
 
    height: 80px; 
 
    justify-content: flex-start; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
} 
 
li { 
 
    background-color: #303E49; 
 
    display: flex; 
 
    list-style: none; 
 
    margin-right: 0.5em; 
 
} 
 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
    margin: 0.5em 0.5em 0.5em 0.5em; 
 
    border: 1px solid white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Resize this window horizontally to see what I am talking about. 
 

 
<ul> 
 
    <li id="shrink"> 
 
    <a href="#"><span>HowCanIMakeThisBoxShrink 
 
      WhenTheTextBreaksToANewLine?</span></a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Text</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Text</a> 
 
    </li> 
 
</ul>