इनलाइन-ब्लॉक लाइन-रैप अतिरिक्त स्थान

Question

मुझे एक इनलाइन-ब्लॉक तत्व मिला है जिसमें बहुत लंबा शब्द होता है। जब तक मैं व्यूपोर्ट का आकार बदलता हूं, जब तक कि मैं अगली पंक्ति में टेक्स्ट रैपिंग के ब्रेकपॉइंट तक नहीं पहुंच जाता, मुझे पर्याप्त मात्रा में स्थान मिलता है। हालांकि, मैं इनलाइन-ब्लॉक तत्व को अपनी सामग्री की चौड़ाई पर तुरंत लपेटना चाहता हूं। व्यूपोर्ट आकार बदलने पर

:

मैं इसे कठिन समझाने के लिए वास्तव में क्या, हो रहा है तो एक एनिमेटेड GIF नीचे मेरी समस्या को वर्णन करने के लिए मिला

स्पष्ट है कि, उपरोक्त छवि मैं लगातार व्यूपोर्ट का आकार बदल रहा हूं।

क्या कोई मुझे जो हासिल करना चाहते हैं उसे प्राप्त करने का कोई तरीका जानता है? सीएसएस हाइफेनेशन के साथ भी सफेद-स्थान अभी भी बनी हुई है (जो मैं नहीं चाहता)।

JSFiddle। मेरा मतलब क्या है यह देखने के लिए फ्रेम का आकार बदलें।

div { 
    display: inline-block; 
    background-color: black; 
    color: white; 
    padding: 5px; 
} 

Answer 1

का एक उदाहरण है inline-block वास्तव में आपके एनीमेशन शो के रूप में आकार बदलने पर विस्तार करता है, ताकि यह उस शब्द में फिर से जाने के लिए लंबे शब्द के लिए रखे।

एक आसान समाधान text-align: justify जोड़ने के लिए होगा, लेकिन मुझे डर है कि यह वही नहीं हो सकता है जो आप चाहते हैं (demo देखें)।

एक अन्य व्यक्ति media queries का उपयोग करेगा, जैसा कि @ पारोडी ने सुझाव दिया था, लेकिन आपको div युक्त अवशोषणों को जानना होगा, और जैसा कि आपने उल्लेख किया है, यह बहुत स्केलेबल नहीं होगा।

word-break: break-all @yugi द्वारा सुझाए गए कार्यों का भी काम करता है लेकिन शब्दों को उनकी लंबाई के बावजूद पत्र द्वारा पत्र को पतन करने का कारण बनता है।

जावास्क्रिप्ट का उपयोग करने के लिए सटीक व्यवहार प्राप्त करने का एकमात्र तरीका (जहां तक ​​मुझे पता है) है। उदाहरण के लिए, अगर आप इस तरह div अंदर एक span तत्व में अपने पाठ लपेट, और फिर जोड़ने के लिए कुछ है जाएगा:

var paddingLeft = parseInt($('#foo').css('padding-left')), 
    paddingRight = parseInt($('#foo').css('padding-left')), 
    paddingTop = parseInt($('#foo').css('padding-top')), 
    paddingBottom = parseInt($('#foo').css('padding-Bottom')), 
    cloned = $('#foo span').clone(), 
    cloned_wrap = document.createElement('div'); 

$(cloned_wrap).css({ 
    paddingLeft : paddingLeft, 
    paddingRight : paddingRight, 
    display : 'inline-block', 
    visibility: 'hidden', 
    float: 'left', 
}); 

$(cloned_wrap).insertAfter('#foo'); 
cloned.appendTo(cloned_wrap); 

$(window).on('resize', function(){ 
    $('#foo').css('width', cloned.width() + 1); 
    $(cloned_wrap).css('margin-top',- $('#foo').height() - paddingTop - paddingBottom); 
}).resize(); 

कृपया jsfiddle working demo देखते हैं। (← कई बार संपादित)

यह काफी कोड है, लेकिन यह काम करता है;)

(पुनश्च: मैं मान लिया jQuery उपलब्ध था, अगर नहीं, काफी एक ही शुद्ध जे एस में प्राप्त)

Answer 2

im समझ आप सही तरीके से आप @media प्रकार का उपयोग कर सकता है क्या सीएसएस स्क्रीन

यहाँ

की चौड़ाई के आधार पर उपयोग करने के लिए तय करने के लिए मैं क्या मतलब

@media(min-width:0px) and (max-width:200px){ 
    div { 
    display: block; 
    background-color: black; 
    color: white; 
    padding: 5px; 
    } 
} 
@media (min-width:200px){ 
    div { 
    display: inline-block; 
    background-color: black; 
    color: white; 
    padding: 5px; 
    } 
} 

Answer 3

मुझे नहीं लगता कि यह केवल एक ही तत्व के लिए सीएसएस के साथ संभव है है। आपके व्यवहार का कारण यह है कि तत्व की चौड़ाई अभी भी इसके कंटेनर का 100% है। इसे पूरा करने के लिए एकमात्र तरीका यह है कि मैं कुछ "रचनात्मक" कर रहा हूं ... शैली को इनलाइन करने की कोशिश करें ताकि आपको सिकुड़-लपेटने का व्यवहार मिल सके, लेकिन पृष्ठभूमि रंग के मुद्दे को पाने के लिए, इसे भी अंदर रखा जाए एक कंटेनर जो एक ही पृष्ठभूमि साझा करता है।यह काम करना चाहिए।

Answer 4

मैं अभी भी @ लैपिन के उत्तर (जिसे मैंने स्वीकार किया और बक्षीस से सम्मानित किया) की बहुत सराहना की है, मुझे इस तथ्य के बाद पता चला कि यह एक दूसरे के बगल में कई तत्वों पर काफी काम नहीं करता है (जिसका कोई संबंध नहीं है @ लैपिन, मैंने अभी अपने मूल प्रश्न में इसका जिक्र नहीं किया क्योंकि मैंने सोचा था कि यह अप्रासंगिक जानकारी होगी)। (तत्वों यह लागू किया जाना चाहिए करने के लिए .title और .subtitle हैं यह सोचते हैं)

वैसे भी, मैं निम्नलिखित है कि मेरे लिए काम करता लेकर आए हैं:

$('.title, .subtitle').each(function(i, el) { 
    var el = $(el), 
     inner = $(document.createElement('span')), 
     bar = $(document.createElement('span')); 

    inner.addClass('inner'); 
    bar.addClass('bar'); 

    el.wrapInner(inner) 
     .append(bar) 
     .css({ 
      backgroundColor: 'transparent' 
     }); 
}); 

function shrinkWrap() { 
    $('.title, .subtitle').each(function(i, el) { 
     var el = $(el), 
      inner = $('.inner', el), 
      bar = $('.bar', el), 
      innerWidth = inner.width(); 

     bar.css({ 
      bottom: 0, 
      width: innerWidth + parseFloat(el.css('paddingLeft')) + parseFloat(el.css('paddingRight')) 
     }); 
    }); 
} 
shrinkWrap(); 

$(window).on('resize', function() { 
    shrinkWrap(); 
}); 

मूल रूप से मैं क्या है:

1. टेक्स्ट को एक आंतरिक रैप तत्व में रखें
2. एक अतिरिक्त पूरी तरह से स्थित पृष्ठभूमि तत्व बनाएं
3. वाई प्राप्त करें इनलाइन भीतरी चादर तत्व की डीटीएच
4. कहा लागू पृष्ठभूमि तत्व को चौड़ाई (प्लस गद्दी और whatnot)

सीएसएस:

.title, .subtitle { 
    position: relative; 
    z-index: 500; 
    display: table; 
    padding-left: 10px; 
    margin-right: 10px; 
    background-color: red; 
} 

.title .bar, .subtitle .bar { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    z-index: -10; 
    background-color: red; 
}