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

css, html, letter-spacing

Solution

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>

Problem

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

Original source

Related problems