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

问题描述

我需要在100％宽度的div容器中完全容纳文本.

i need to fit completely a text in a 100% width div container.

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

I attempted using letter-spacing but it looks like only accepts px/em, and not percent values.. but that wont be responsive (e.g. resizing window).

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

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

Should i take another approach? Any ideas? Thank you

推荐答案

如果知道您有多少个字母，则可以使用 vw (视口宽度)单元来实现.

If you know how many letters you have you can sort of achieve this using the vw (viewport width) unit.

在下面的示例中，我使用了 14.29vw 的值，即100(窗口宽度的100％)除以7(单词"CONTENT"中的字母数))大约是14.29.

In the below example I've used a value of 14.29vw, as 100 (100% of the width of the window) divided by 7 (the number of letters in the word "CONTENT") is roughly 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 可以达到目的:

If you want to make the "T" closer to the right edge you can increase the letter-spacing a little. For Stack Overflow's code snippets, setting it to 14.67vw does the trick:

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>

这篇关于CSS:字母间距百分比以完全适合div容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！