How to make parent element shrink when line breaks?

Question

How can I get the parent HTML element to adjust its width when the text of the child element is wrapped on a new line? Do I need to use javascript or can it be done with css?

The following is an example.

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> 

I need the size of the <li></li> container so that it matches the width of the text of its child <a></a> . In my current implementation, the width <a></a> reduced when the text is split into a new line, but not by the width <li></li>

thanks

Answer 1

Currently, you only have content that forces these divs to open. If you define the width of these divs, you should get the desired effect you are looking for. Something like this will create an even three-column layout:

 li{ width: 33.33%; } 

However, it looks like you want something more dynamic than a static three-column layout, but I'm not quite sure what you are looking for. If my solution above does not help, can you possibly explain what you are looking for in more detail?

Answer 2

I just tried replacing the new lines with <br> by resizing (when changing the height of the range). It works when resizing. Now, perhaps by adding the replacement <br> to a new line when resizing (perhaps remember the width at which the replacement was made).

 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>