CSS: Boşluk doldurma yüzdesi, div kutusuna tamamen sığması için

Question

% 100 genişlikte bir div kabına tamamen bir metin sığdırmalıyım.

letter-spacing'u kullanmayı denedim, ancak yalnızca px/em değerlerini değil, yüzde değerlerini kabul ediyor gibi görünüyor. Ancak bu, yanıt vermeyecek (örn. Yeniden boyutlandırma penceresi). http://jsfiddle.net/3N6Ld/

ben başka yaklaşım olmalı:

Bu i o mu öldürdü? Herhangi bir fikir? Teşekkürler

Answer 1

Kaç tane harfiniz olduğunu biliyorsanız, bunu vw (viewport genişlik) birimini kullanarak gerçekleştirebilirsiniz.

Aşağıdaki örnekte, 14.29vw değerini kullandım, 100 olarak (pencerenin genişliğinin% 100'ü) 7'ye bölünür ("CONTENT" sözcüğündeki harf sayısı) yaklaşık 14.29'dur.

Eğer letter-spacing biraz artırabilir sağ kenarına "T" daha yakın olmak için

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>

. Bunun konteyner var metninin bütün genişliğini kullanır, böylece uygulamak harf aralığı hesaplayan bir jQuery pasajı yazdığı

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

: 14.67vw ayarlayarak Stack Overflow en kod parçacıkları, için hile yapar : Stretch text to fit width of div.

Sen metne uygulayın ve tarayıcı yeniden boyutlandırıldığında böylece letter-spacing yeniden hesaplanır boyutlandırmak penceresinde ateşlendiğinde edilebilir:

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

CSS:

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

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

Answer 3

Eğer semantik olmak zorunda yoksa diğer çözüm, sadece görsel bir sonuç gerekiyorsa Yani, flexbox'a kullanmaktır.

Yani var senin <div id="#myText">TEXT 1</div> Bu almak gerekir

:

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

Öyleyse uygulayabilirsiniz CSS:

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

yapabilirsiniz span metni dönüştürmek amacıyla jQuery veya neyse kullanın.İşte jQuery ile: Daha iyi sonuçlar için

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

mektup aralık koymak kaldır: 0 #myText içine öylesine herhangi bir ekstra boşluk uygulanacaktır.