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 value

Answer 1

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 :

    
CONTENT

jQuery :

$.fn.strech_text = function(){
    var elmt          = $(this),
        cont_width    = elmt.width(),
        txt           = elmt.text(),
        one_line      = $('' + txt + ''),
        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;
}