Jak sprawić, by element nadrzędny kurczył się podczas łamania linii?

Question

W jaki sposób mogę uczynić element nadrzędny HTML dostosować jego szerokość, gdy tekst element podrzędny zawija się do nowego wiersza? Czy muszę używać javascript lub czy można to zrobić za pomocą css?

Poniżej znajduje się przykład.

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>

muszę pojemnika elementem <li></li> szerokość do szerokości tekst jej dziecka <a></a>. W mojej obecnej implementacji szerokość <a></a> jest zmniejszana, gdy tekst łamie do nowej linii, ale nie szerokość <li></li>

Dzięki

Answer 1

Obecnie masz tylko treść zmusza te DIV otwarte. Jeśli zdefiniujesz szerokości tych elementów div, powinieneś uzyskać pożądany efekt, którego szukasz. Coś takiego byłoby stworzyć jeszcze układ trzech kolumn:

li{ 
    width: 33.33%; 
} 

jednak, że brzmi to jak chcesz coś trochę bardziej dynamiczny niż statyczny układ trzech kolumn, ale nie jestem do końca pewien, czego szukasz dla. Jeśli powyższe rozwiązanie nie pomoże, możesz wyjaśnić to, czego szukasz bardziej szczegółowo?

Answer 2

Po prostu próbowałem zamienić znaki nowej linii na <br> przy zmianie rozmiaru (gdy zmienia się wysokość span). Działa podczas zmiany rozmiaru w dół. Teraz być może dodanie zamiennika <br> do nowej linii na zmianę rozmiaru (być może pamiętasz szerokość, na której dokonano zamiany).

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>