CSS:字母间距百分比完全适合div容器

Question

我需要在100%宽度的div容器中完全放入文本.

我试图使用,letter-spacing但它看起来只接受px/em,而不是百分比值..但不会响应(例如调整窗口大小).

这就是我得到的:http://jsfiddle.net/3N6Ld/

我应该采取另一种方法吗？有任何想法吗？谢谢

Answer 1

如果您知道有多少个字母,可以使用vw(视口宽度)单位实现此目的.

在下面的例子中,我使用的值为14.29vw100(窗口宽度的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一点.对于Stack Overflow的代码片段,设置它可以解决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

如果不必一定要具有语义，另一种解决方案是使用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));
    }
});

为了获得更好的结果，请在#myText中删除字母间距：0，以便应用任何多余的间距。

Answer 3

我写了一个jQuery片段,计算要应用的字母间距,以便文本使用它的容器的整个宽度:拉伸文本以适合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;
}