CSS：完全適合div容器的字母間距百分比

Question

我需要完全適合100％寬度div容器中的文本。

我嘗試使用letter-spacing，但它看起來像只接受px/em，而不是百分比值......但不會響應（如調整窗口大小）。

這是我得到：http://jsfiddle.net/3N6Ld/

我應該採取另一種方法？有任何想法嗎？謝謝

Answer 1

如果你知道你有多少個字母，你可以使用vw（視口寬度）單位來達到這個目的。

在下面的例子中，我使用了14.29vw的值，因爲100（窗口寬度的100％）除以7（單詞「CONTENT」中的字母數）約爲14.29。

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>

如果你想使「T」靠近右邊，你可以增加letter-spacing一點。堆棧溢出的代碼片段，將其設置爲14.67vw的伎倆：

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的片段，計算字母間距應用，使文本使用的整個寬度的它的容器：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(); 
    }); 
}); 

CSS：

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> 

，那麼你可以應用CSS：

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

爲了改造文本跨越即可使用jQuery或其他。這裏使用jQuery：

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

爲了獲得更好的搜索結果中刪除把字母間距：0到#myText所以任何額外的空白將被應用。