CSS：字间距百分比如何完全适配div容器

Question

我需要将文本完全适应于100%宽度的

容器中。

我尝试使用letter-spacing，但它似乎只接受px/em值，而不是百分比值... 但这不是响应式的（例如调整窗口大小）。

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

我应该采取其他方法吗？有什么想法吗？谢谢

- pumpkinzzz

Answer 1

如果你知道有多少个字母，你可以使用vw（视口宽度）单位来实现。

在下面的示例中，我使用了14.29vw的值，因为100（窗口宽度的100%）除以单词“CONTENT”中的7（字母数）约为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>

- James Donnelly

---

有些奇特 ;) - 我喜欢。如果是动态的，我想你可以使用JS来计算长度并相应地设置。 - Ian Clark

CSS解决方案加1分。我猜在更复杂的HTML（和响应式）结构中，仅靠一些JS代码可能不足够，因为窗口宽度可能并不总是“相对于我们的div容器”（例如，如果我给它一个最大宽度）。无论如何，非常好的答案，谢谢。 - pumpkinzzz

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

为了将文本转换为span，您可以使用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));
    }
});

为了获得更好的效果，请将letter-spacing: 0放入#myText中，这样任何额外的间距都会被应用。

- perseus

---

这真是个天才之举。我使用了 justify-content:center，因为对于较小的单词，使用 justify-content:space-between 会显得很奇怪。感谢您的提示！ - elPastor

另外还有几点需要注意 - 在你的CSS中添加#myText > span { min-width:0; }以确保字母在需要时可以压缩。此外，不需要使用if()语句，只需使用v.replace(' ',' ')即可。 - elPastor

Answer 3

我写了一个jQuery代码片段，它计算字距以便文本使用其容器的整个宽度：拉伸文本以适应div宽度。

您可以将其应用于文本，并在调整窗口大小时触发它，以便重新计算字距： 演示 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;
}

- web-tiki

---

你太棒了。这是完成任务最响应和最简单的方式。 - Pinjarla Girish

Answer 4

这里我解决了。

# HTML:

    <div class="header-sub-brand">
    <span>M</span>
    <span>A</span>
    <span>I</span>
    <span>L</span>
    <span>D</span>
    <span>O</span>
    <span>L</span>
    <span>L</span>
    </div>

# CSS:

    .header-sub-brand {
       font-weight: 500;
       font-size: 12px;
       display: flex;
       justify-content: space-between;
    }

- Pri Nce