सबसे छोटी संभव चौड़ाई

Question

के साथ पूर्ण ऊंचाई सामग्री मुझे कभी नहीं लगता कि यह संभव है, लेकिन यहां बहुत सारे चालाक लोग हैं इसलिए मैंने सोचा कि मैं पूछूंगा। मैं एक पूर्ण-ऊंचाई कंटेनर रखने का एक तरीका ढूंढ रहा हूं जिसकी चौड़ाई इस बात पर निर्भर करती है कि कितनी सामग्री है। मैं सबसे छोटी संभव चौड़ाई का उपयोग करते हुए पाठ को पूर्ण ऊंचाई तक ले जाने के क्षेत्र को भरना चाहता हूं। ऊंचाई ज्ञात और हार्ड कोडित है, सामग्री की मात्रा नहीं है।

मैं 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; 
} 

आम तौर पर सामग्री ऊपर से नीचे तक पेज भरता है:

मैं क्या देख रहा हूँ प्रकार है विपरीत, बाएं से दाएं भरना:

कम सामग्री के साथ

, यह इस तरह दिखना चाहिए:

वहाँ किसी भी है:

width:auto के साथ पूर्ण हार्ड-कोडेड ऊंचाई का उपयोग करते हुए इस आशय का उत्पादन टेक्स्ट को चौड़ाई को चौड़ाई या कोड रखने के बिना, छोटी संभव चौड़ाई के साथ ऊंचाई को भरने का तरीका टी अतिप्रवाह? यह असंभव प्रतीत होता है और मुझे नहीं पता कि इसे कैसे पहुंचाया जाए। जावास्क्रिप्ट/jQuery समाधान स्वागत है।

Answer 1

क्या मैं मन में है एक सरल jQuery समाधान है: थोड़ी देर के पाश में, शर्त सेट ऐसा है कि पाश जब भी ऊंचाई कंटेनर ऊंचाई से अधिक चलाया जाता है।

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; 
} 

: पाश में, आप जब तक ऊंचाई नहीं रह गया है कंटेनर ऊंचाई :)

$(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/

मैं अपने सीएसएस करने के लिए कुछ परिवर्तन किए हैं, भी अधिक है पिक्सेल द्वारा <p> पिक्सेल की चौड़ाई बढ़ाने के

Answer 2

यह भी जावास्क्रिप्ट के साथ करना मुश्किल नहीं है। मुझे नहीं पता कि जेएस के बिना इसे कैसे करना है (यदि यह भी संभव है)।

आप 320px ऊंचाई तक पहुंचने तक आयामों को मापने के लिए एक और "अदृश्य" div का उपयोग कर सकते हैं, जबकि एक सेट राशि के साथ इसे कम कर सकते हैं (एक समय में 1 पिक्सेल भी, यदि आप यथासंभव सटीक होना चाहते हैं)।

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

इस प्रयास करें:

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

हम अनुच्छेद overflow:auto; दे सकते हैं।

यदि अनुच्छेद को लंबवत स्क्रॉल बार की आवश्यकता है, तो यह एक बना देगा।

चाल स्क्रॉल बार बनने तक चौड़ाई को कसने के लिए है।

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

आप jQuery/जावास्क्रिप्ट का उपयोग करें और ग्राहक की जाँच बनाम स्क्रॉल ऊंचाइयों चौड़ाई बढ़ती है जब तक यह पाठ, नीचे के समान हो गया रख सकते हैं।

आपको पर टैग पर 10 पर सीएसएस में overflow: hidden; पर सेट करने की आवश्यकता है ताकि आपको अतिप्रवाह सहित वास्तविक ऊंचाई प्रदान की जा सके।

नीचे कोड दोनों के लिए मार्जिन और पैडिंग भी लेता है; ऊंचाई और चौड़ाई और तदनुसार समायोजित करता है।

तदनुसार बाहरी div ajdust की ऊंचाई बदलना।

$(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 - चौड़ाई आगे बढ़ें जब तक पाठ पूरी तरह से दिखाई दे रहा है

---