Nội dung chiều cao đầy đủ với chiều rộng nhỏ nhất có thể

Question

Tôi sẽ không bao giờ nghĩ điều này là có thể, nhưng có rất nhiều người thông minh ở đây nên tôi nghĩ tôi sẽ hỏi. Tôi đang tìm một cách để có một container đầy đủ chiều cao có chiều rộng phụ thuộc vào bao nhiêu nội dung có. Tôi muốn các văn bản để điền vào khu vực chiếm chiều cao đầy đủ trong khi sử dụng chiều rộng nhỏ nhất có thể. Chiều cao được biết và được mã hóa cứng, lượng nội dung không được.

Tôi đang làm việc với something like this:

<div> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
    when an unknown printer took a galley of type and scrambled....</p> 
</div> 

div { 
    background:red url(http://lorempixel.com/600/400/); 
    float:left; 
    width:600px; 
    height:400px; 
} 
p { 
    background:#fff; 
    padding:20px; 
    margin:20px; 
} 

nội dung thường lấp đầy trang từ trên xuống dưới:

Những gì tôi đang tìm loại của đối diện, điền từ trái sang phải:

Với nội dung ít hơn, nó sẽ giống như thế này:

Sử dụng đầy đủ chiều cao mã hóa cứng với width:auto tạo hiệu ứng này:

Có cách để có văn bản lấp đầy chiều cao với chiều rộng nhỏ nhất có thể, không có mã hóa cứng một chiều rộng hoặc có tex t tràn? Có vẻ như không thể và tôi không biết cách tiếp cận nó. Các giải pháp Javascript/jQuery được chào đón.

Answer 1

Những gì tôi có trong tâm trí là một giải pháp jQuery đơn giản: trong một vòng lặp while, đặt điều kiện như vậy mà các vòng lặp được chạy bất cứ khi nào chiều cao vượt quá chiều cao thùng sơn. Trong vòng lặp, bạn tăng độ rộng của <p> từng pixel một cho đến khi chiều cao không còn vượt quá chiều cao thùng :)

$(document).ready(function() { 
    // The 400-80 is because you have to subtract the container padding and the element's own padding 
    while($("div > p").height() > 400 - 80) { 
     currentWidth = $("div > p").width(); 
     $("div > p").width(currentWidth + 1);  
    } 
}); 

http://jsfiddle.net/teddyrised/RwczR/4/

Tôi đã thực hiện một số thay đổi CSS của bạn, quá:

div { 
    background:red url(http://lorempixel.com/600/400/); 
    float:left; 
    overflow: hidden; 
    width:600px; 
    height:400px; 
    padding: 20px; 
    box-sizing: border-box; 
} 
p { 
    background:#fff; 
    padding: 20px; 
    width: 1px; 
} 

Answer 2

Đây không phải là quá khó thực hiện với JavaScript. Tôi không có ý tưởng làm thế nào để làm điều đó mà không có JS (nếu đó là thậm chí có thể).

Bạn có thể sử dụng div "ẩn" khác để đo kích thước cho đến khi chiều cao 320px trong khi giảm với số lượng được đặt (thậm chí 1 pixel tại một thời điểm, nếu bạn muốn chính xác nhất có thể).

var $measurer = $("<div>").css({'position': 'fixed', 'top': '100%'}) 
    .text($("p").text()).appendTo('body'); 

var escape = 0; 
while ($measurer.height() < 320) { 
    console.log($measurer.height()); 
    $measurer.width(function (_, width) { return width - 1; }); 
    console.log($measurer.width()); 
    escape++; 
    if (escape > 2000) { 
     break; 
    } 
} 
$("p").width($measurer.width()); 
$measurer.remove(); 

http://jsfiddle.net/RwczR/2/

Answer 3

Hãy thử điều này:

var p = $('p'); 
var height = parseInt(p.height())-40; 
p.height('auto'); 
p.width('auto'); 
for(var i=p.width(); i--;) { 
    p.width(i); 
    if (p.height() > height) { 
     p.height(height+20); 
     p.width(i-1); 
     break; 
    } 
} 
p.height(height); 

http://jsfiddle.net/RwczR/6/

Answer 4

Chúng tôi có thể cung cấp cho đoạn văn overflow:auto;.

Nếu đoạn cần một thanh cuộn dọc, nó sẽ tạo một thanh.

Bí quyết là tiếp tục thắt chặt chiều rộng, cho đến khi thanh cuộn được tạo.

var hasScrollBar = false; 
var p = document.getElementById('myParagraph'); 
while(!hasScrollBar) 
{ 
    if(p.scrollHeight>p.clientHeight) 
    { 
     //Has Scroll Bar 
     //Re-Increase Width by 1 Pixel 
     hasScrollBar=true; 
     p.style.width=(p.clientWidth+1)+"px"; 
    } 
    else 
    { 
     //Still no Scroll Bar 
     //Decrease Width 
     p.style.width=(p.clientWidth-1)+"px"; 
    } 
} 

Answer 5

Bạn có thể sử dụng jQuery/JavaScript và kiểm tra ứng dụng so với chiều cao cuộn tiếp tục tăng chiều rộng cho đến khi vừa với văn bản, tương tự như bên dưới.

Bạn cũng cần đặt overflow: hidden; trong CSS trên thẻ p cho số scrollHeight để cung cấp cho bạn chiều cao thực tế bao gồm phần tràn.

Mã bên dưới cũng tính cả lợi nhuận và phần đệm cho cả hai; chiều cao và chiều rộng và điều chỉnh cho phù hợp.

Thay đổi chiều cao của ajdust div bên ngoài cho phù hợp.

$(document).ready(function(){ 
    var $container = $("div"); 
    var containerHeight = $container.height(); 
    var containerWidth = $container.width(); 

    var $textWrapper = $(">p", $container); 

    var paddingMarginHeight = $textWrapper.outerHeight(true) - $textWrapper.innerHeight(); 
    var paddingMarginWidth = $textWrapper.outerWidth(true) - $textWrapper.innerWidth(); 

    $textWrapper.innerHeight(containerHeight - paddingMarginHeight); 

    //SetMinWidth(); 
    var maxWidth = containerWidth - paddingMarginWidth; 
    var visibleHeight = 0; 
    var actualHeight = 0; 

    for(i = 50; i <= maxWidth; i++){ 
     $textWrapper.innerWidth(i); 

     visibleHeight = $textWrapper[0].clientHeight; 
     actualHeight = $textWrapper[0].scrollHeight; 

     if(visibleHeight >= actualHeight){ 
      break; 
      console.log("ouyt"); 
     } 
    } 
}); 

---

DEMO - Grow chiều rộng cho đến khi văn bản là hoàn toàn có thể nhìn thấy

---