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>

Answer 2

Another solution if you don't have to be semantic, I mean if you need only the visual result, is to use flexbox.

So you have your <div id="#myText">TEXT 1</div>

We need to get this:

<div id="#myText">
    <span>T</span>
    <span>E</span>
    <span>X</span>
    <span>T</span>
    <span>&nbsp;</span>
    <span>1</span>
</div>

So then you can apply CSS:

#myText {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

In order to transform the text to span you can use jQuery or whatever. Here with 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));
    }
});

For better results remove put letter-spacing: 0 into #myText so any extra spacing will be applied.

Answer 3

I wrote a jQuery snippet that calculates the letter spacing to apply so that the text uses the whole width of it's container : Stretch text to fit width of div.

You may apply it to the text and fire it on window resize so letter-spacing is recalculated when the browser is resized :

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

Answer 4

Here I solved this.

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