Come ridurre l'elemento genitore quando si interrompe la linea?

Question

Come posso fare in modo che un elemento padre HTML modifichi la sua larghezza, quando un testo di elemento figlio si avvolge su una nuova riga? Devo usare javascript o può essere fatto con css?

Di seguito è riportato un esempio.

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>

Ho bisogno del contenitore elemento <li></li> larghezza in base alla larghezza del testo del suo bambino <a></a>. Nel mio attuale implementazione della larghezza di <a></a> è diminuito, quando il testo si rompe per una nuova linea, ma non la larghezza delle <li></li>

Grazie

Answer 1

Attualmente, si ha solo il contenuto costringendo quei div aperta. Se definisci le larghezze di queste div, dovresti ottenere l'effetto desiderato che stai cercando. Qualcosa di simile a questo sarebbe creare un layout ancora tre colonne:

li{ 
    width: 33.33%; 
} 

Tuttavia, suona come volete qualcosa di un po 'più dinamico di un layout a tre colonne statica, ma io non sono esattamente sicuro quello che stai cercando per. Se la mia soluzione di cui sopra non aiuta, puoi forse spiegare ciò che stai cercando in modo più dettagliato?

Answer 2

Ho appena provato a sostituire le nuove righe con <br> su ridimensionamento (quando l'altezza di span cambia). Funziona quando ridimensionamento. Ora forse aggiungendo la sostituzione di <br> a newline al ridimensionamento (forse ricorda la larghezza a cui è stata effettuata la sostituzione).

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>