सीएसएस: लेटर-स्पेसिंग प्रतिशत पूरी तरह से div कंटेनर फिट करने के लिए

Question

मुझे 100% चौड़ाई div कंटेनर में पूरी तरह से एक टेक्स्ट फिट करने की आवश्यकता है।

मैंने letter-spacing का उपयोग करने का प्रयास किया लेकिन ऐसा लगता है कि केवल पीएक्स/एम स्वीकार करता है, न कि प्रतिशत मान .. लेकिन यह उत्तरदायी नहीं होगा (उदाहरण के लिए खिड़की का आकार बदलना)। http://jsfiddle.net/3N6Ld/

मैं एक और तरीका अपनाने चाहिए:

यह मैं क्या मिला है? कोई विचार? धन्यवाद

Answer 1

यदि आप जानते हैं कि आप कितने अक्षरों को vw (व्यूपोर्ट चौड़ाई) इकाई का उपयोग करके प्राप्त कर सकते हैं।

नीचे दिए गए उदाहरण में मैंने 14.29vw का मान उपयोग किया है, 100 (खिड़की की चौड़ाई का 100%) 7 से विभाजित है (शब्द "सामग्री" में अक्षरों की संख्या लगभग 14.2 9 है।

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.container{ 
 
    background: tomato; 
 
    height: 10%; 
 
    width: 100%; 
 
} 
 

 
.content { 
 
    color: white; 
 
    letter-spacing: 14.29vw; 
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    CONTENT 
 
    </div> 
 
</div>

आप "टी" दाहिने किनारे के करीब आप letter-spacing एक छोटे से वृद्धि कर सकते हैं बनाना चाहते हैं।

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.container{ 
 
    background: tomato; 
 
    height: 10%; 
 
    width: 100%; 
 
} 
 

 
.content { 
 
    color: white; 
 
    letter-spacing: 14.67vw; 
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    CONTENT 
 
    </div> 
 
</div>

Answer 2

मैं एक jQuery टुकड़ा है कि पत्र है कि पाठ पूरी चौड़ाई का उपयोग करता है तो लागू करने के लिए की यह कंटेनर है रिक्ति की गणना करता है लिखा है: स्टैक ओवरफ़्लो के कोड के टुकड़े, 14.67vw करने के लिए इसे स्थापित करने के लिए काम कर देता है : Stretch text to fit width of div।

आप इसे पाठ पर लागू और खिड़की पर यह आग का आकार परिवर्तन तो पत्र-रिक्ति पुनर्गणना की जाती है जब ब्राउज़र का आकार बदलने पर हो सकता है:

DEMO

HTML:

<div class="container"> 
    <div class="stretch">CONTENT</div> 
</div> 

jQuery:

$.fn.strech_text = function(){ 
    var elmt   = $(this), 
     cont_width = elmt.width(), 
     txt   = elmt.text(), 
     one_line  = $('<span class="stretch_it">' + txt + '</span>'), 
     nb_char  = elmt.text().length, 
     spacing  = cont_width/nb_char, 
     txt_width; 

    elmt.html(one_line); 
    txt_width = one_line.width(); 

    if (txt_width < cont_width){ 
     var char_width  = txt_width/nb_char, 
      ltr_spacing = spacing - char_width + (spacing - char_width)/nb_char ; 

     one_line.css({'letter-spacing': ltr_spacing}); 
    } else { 
     one_line.contents().unwrap(); 
     elmt.addClass('justify'); 
    } 
}; 

$(document).ready(function() { 
    $('.stretch').strech_text(); 
    $(window).resize(function() { 
     $('.stretch').strech_text(); 
    }); 
}); 

सीएसएस:

html, body{ 
    height: 100%; 
    margin:0; 
} 
.container{ 
    height: 10%; 
    background: red; 
} 

.stretch{ 
    overflow-x:hidden; 
} 
.stretch_it{ 
    white-space: nowrap; 
} 

Answer 3

एक अन्य समाधान अगर आप अर्थ होने की जरूरत नहीं है, आप केवल दृश्य परिणाम की जरूरत है मेरा मतलब है, flexbox उपयोग करने के लिए है।

तो आपके पास अपने <div id="#myText">TEXT 1</div>

हम इस प्राप्त करने की आवश्यकता:

<div id="#myText"> 
    <span>T</span> 
    <span>E</span> 
    <span>X</span> 
    <span>T</span> 
    <span>&nbsp;</span> 
    <span>1</span> 
</div> 

तो फिर आप आवेदन कर सकते हैं सीएसएस:

#myText { 
    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
} 

आदेश को पार करने वाली आप कर सकते हैं पाठ को बदलने के लिए jQuery या जो कुछ भी उपयोग करें।jQuery के साथ यहाँ: #myText में 0 इसलिए किसी भी अतिरिक्त रिक्ति लागू किया जाएगा:

var words = $('#myText').text().split(""); 
$('#myText').empty(); 
$.each(words, function(i, v) { 
    if(v===' '){ 
     $('#myText').append('<span>&nbsp;</span>'); 
    } else { 
     $('#myText').append($("<span>").text(v)); 
    } 
}); 

बेहतर परिणामों के लिए डाल निकाल पत्र-रिक्ति।