Cách làm cho phần tử gốc co lại khi ngắt dòng?

Question

Làm cách nào để tạo một phần tử cha mẹ HTML điều chỉnh chiều rộng của nó, khi văn bản phần tử con kết thúc tốt đẹp với một dòng mới? Tôi có cần phải sử dụng javascript hoặc nó có thể được thực hiện với css?

Dưới đây là ví dụ.

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>

Tôi cần container yếu tố <li></li> chiều rộng để phù hợp với chiều rộng văn bản của con mình <a></a>. Trong việc thực hiện hiện tại của tôi chiều rộng của <a></a> được giảm, khi văn bản vi phạm để một dòng mới, nhưng không phải là chiều rộng của <li></li>

Cảm ơn

Answer 1

Hiện tại, bạn chỉ có nội dung buộc những divs mở. Nếu bạn xác định độ rộng của các div đó, bạn sẽ nhận được hiệu ứng mong muốn mà bạn đang tìm kiếm. Một cái gì đó như thế này sẽ tạo bố cục ba cột ngay cả:

li{ 
    width: 33.33%; 
} 

Tuy nhiên, có vẻ như bạn muốn một chút năng động hơn bố cục tĩnh ba cột nhưng tôi không chắc chắn bạn đang tìm gì cho. Nếu giải pháp của tôi ở trên không hiệu quả, bạn có thể giải thích những gì bạn đang tìm kiếm chi tiết hơn không?

Answer 2

Tôi vừa cố gắng thay thế dòng mới bằng <br> để thay đổi kích thước (khi chiều cao nhịp thay đổi). Nó hoạt động khi thay đổi kích thước xuống. Bây giờ có thể thêm sự thay thế của <br> để dòng mới về thay đổi kích thước lên (có thể nhớ chiều rộng mà tại đó là thay thế được thực hiện).

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>