CSS: Letter-spacing percent to completely fit the div container

Question

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

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).

This is what i got: http://jsfiddle.net/3N6Ld/

Should i take another approach? Any ideas? Thank you

Answer 1

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

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>

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>