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所以任何额外的空白将被应用。